HTMLSelectElement: disabled property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
TheHTMLSelectElement.disabled property is a boolean value that reflects thedisabledHTML attribute, which indicates whether the control is disabled. If it is disabled, itdoes not accept clicks. A disabled element is unusable and un-clickable.
Value
A boolean value.
Examples
HTML
html
<label> Allow drinks? <input type="checkbox" /></label><label for="drink-select">Drink selection:</label><select disabled> <option value="1">Water</option> <option value="2">Beer</option> <option value="3">Pepsi</option> <option value="4">Whisky</option></select>JavaScript
js
const allowDrinksCheckbox = document.getElementById("allow-drinks");const drinkSelect = document.getElementById("drink-select");allowDrinksCheckbox.addEventListener("change", (event) => { drinkSelect.disabled = !event.target.checked;});Result
Specifications
| Specification |
|---|
| HTML # dom-fe-disabled |