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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
disabled | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support