HTML - DOM disabled Property

Quiz

The HTML DOM disabled property is used to set (update) or get (retrieve) the disabled status of a <select> element. It returns a boolean value "true", if the "select" field is disabled, and "false" if it is enabled.

When the disabled property is set to true, the "select" element becomes inactive to user input and cannot be selected by users for any input.

Syntax

Following is the syntax of the HTML DOM disabled (to get the disabled property) property −

selectObject.disabled

To update (set) the disabled property, use the following syntax −

selectObject.disabled = true|false

Parameters

Since it is a property, it does not accept any parameters.

Return value

This property returns a boolean value (either true or false) representing whether the <select> field is disabled.

Example 1: Retrieving the Disabled Status of the "Select" Field

The following program demonstrates how to use the HTML DOM disabled property to retrieve the disabled status of a <select> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM disabled</title>
</head>
<body>
<p>The below select field is disabled</p>
<select name="your_options" id="demo">
   <option value="html">HTML</option>
   <option value="css">CSS</option>
   <option value="javascript">JavaScript</option>
</select>
<p id="result"></p>
<script>
   let my_option = document.getElementById('demo');
   my_option.disabled = true;
   document.getElementById("result").innerHTML = "Is the select field is disabled: " + my_option.disabled;
</script>
</body>
</html>

Example 2: Updating the Disabled Status of the "Select" Field

The following is another example of using the HTML DOM disabled property. We use this property to dynamically enable an already disabled <select> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM disabled</title>
</head>
<body>
<p>Click the below button to enable the select field.</p>
<select name="your_options" id="demo" disabled>
   <option value="html">HTML</option>
   <option value="css">CSS</option>
   <option value="javascript">JavaScript</option>
</select>
<button id="en_btn">Enable</button>
<p id="result"></p>
<script>
   document.getElementById("en_btn").addEventListener("click", ()=>{
      document.getElementById("demo").disabled = false;
      document.getElementById('result').innerHTML = "Select field has been enabled.";
   });
</script>
</body>
</html>

Example 3: Toggle between disable and enable

In this example, the checkbox controls the disabled property of the <select> element. When the checkbox is checked, the "select" becomes enabled, when unchecked, it gets disabled −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM disabled</title>
</head>
<body>
<p>Click the below checkbox to switch between disable and enable.</p>
<select name="your_options" id="demo" disabled>
   <option value="html">HTML</option>
   <option value="css">CSS</option>
   <option value="javascript">JavaScript</option>
</select>
<input type="checkbox" id="mycheckBox"><span id="msg">Allow me</span>
<p id="result"></p>
<script>
   document.getElementById("mycheckBox").addEventListener("click", ()=>{
      let status = document.getElementById('demo');
      if(status.disabled == true){
         status.disabled = false;
         document.getElementById('msg').innerHTML = "Remove access";
      }
      else{
         status.disabled = true;
         document.getElementById('msg').innerHTML = "Allow me";
      }
   });
</script>
</body>
</html>

Supported Browsers

Property
value	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page