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

Edit

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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
disabledChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support
Full support