HTML <optgroup> disabled Attribute

The disabled attribute of the <optgroup> is used to disable an option-group. After that, the option-group becomes unclickable. Following is the syntax −

<optgroup disabled>

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

Example

<!DOCTYPE html>
<html>
<body>
<h2>Water Levels</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">5:3</option>
   </optgroup>
   <optgroup label="Water" disabled>
      <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

HTML <optgroup> disabled Attribute

In the above example, we have set two option-groups −

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

We have set one of the option-group as disabled −

<optgroup label="Water" disabled>
   <option value="low">2L</option>
   <option value="Medium">5L</option>
   <option value="high">10L</option>
   <option value="veryhigh">20L</option>
</optgroup>

Now the above options will become disabled and visitors won’t be able to select them.