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 StandardThe definition of 'disabled' in that specification. | Living Standard | |
HTML5The 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.
Update compatibility data on GitHub
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
HTMLSelectElement.disabled by Mozilla Contributors is licensed under CC-BY-SA 2.5.