HTML <option> disabled Attribute

The disabled attribute of the <option> element is used to set a disabled option from a list of options. After that, the disabled option won’t be clickable.

Syntax

Following is the syntax −

<option disabled>

Example

Let us now see an example to implement the disabled attribute of the <option> element −

<!DOCTYPE html>
<html>
<body>
<h2>Impurity level of Water</h2>
<p>Impurity Level <meter min="0" low="50" high="95" max="100" value="85"></meter></p>
<select>
<optgroup label="Ratio">
<option value="one">3:2</option>
<option value="two" disabled>5:3</option>
</optgroup>
<optgroup label="Water">
<option value="low">2L</option>
<option value="Medium">5L</option>
<option value="high">10L</option>
<option value="veryhigh">20L</option>
</optgroup>
</select>
</body>
</html>

Output

This will produce the following output. Here, the option 5:3 under the optgroup Ratio −

HTML <option> disabled Attribute

In the above example, we have option-groups and options inside it −

<select>
<optgroup label="Ratio">
<option value="one">3:2</option>
<option value="two" disabled>5:3</option>
</optgroup>
<optgroup label="Water">
<option value="low">2L</option>
<option value="Medium">5L</option>
<option value="high">10L</option>
<option value="veryhigh">20L</option>
</optgroup>
</select>

Above, we have disabled an option using the disabled attribute −

<option value="two" disabled>5:3</option>

Now, you won’t be able to select that particular option since it is disabled.