HTMLSelectElement.disabled

The HTMLSelectElement.disabled is a Boolean that reflects the disabled HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks. A disabled element is unusable and un-clickable.

Syntax

aSelectElement.disabled = aBool;

Example

HTML

<label>
  Allow drinks?
  <input id="allow-drinks" type="checkbox"/>
</label>

<label for="drink-select">Drink selection:</label>
<select id="drink-select" disabled>
  <option value="1">Water</option>
  <option value="2">Beer</option>
  <option value="3">Pepsi</option>
  <option value="4">Whisky</option>
</select>

JavaScript

var allowDrinksCheckbox = document.getElementById("allow-drinks");
var drinkSelect = document.getElementById("drink-select");

allowDrinksCheckbox.addEventListener("change", function(event) {
  if (event.target.checked) {
    drinkSelect.disabled = false;
  } else {
    drinkSelect.disabled = true;
  }
}, false);

Result

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'disabled' in that specification.
Living Standard
HTML5
The definition of 'HTMLSelectElement' in that specification.
Recommendation Initial definition, snapshot of HTML Living Standard.

Browser compatibility

BCD tables only load in the browser