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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
disabled
1
12
1
5.5
9
3
1
18
4
10.1
1
1.0

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/disabled