HTML optgroup 태그의 disabled 속성 – 옵션 그룹 비활성화 방법

HTML의 <optgroup> 요소에서 disabled 속성은 옵션 그룹(option-group) 전체를 비활성화하는 데 사용됩니다. 이 속성이 지정되면 해당 옵션 그룹은 클릭할 수 없는 상태가 되며, 그룹 안에 포함된 모든 옵션 역시 더 이상 선택할 수 없습니다.

disabled 속성 문법(Syntax)

<optgroup disabled>

disabled 속성은 별도의 값 없이 단독으로 작성하며, XHTML 문법을 따르는 경우 disabled="disabled" 형태로도 표기할 수 있습니다.

예제(Example)

다음은 <optgroup> 요소에 disabled 속성을 실제로 적용해 본 예제입니다.

<!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 속성 – 옵션 그룹 비활성화 방법

예제 설명

위 예제에서는 셀렉트 박스 안에 두 개의 옵션 그룹을 설정했습니다.

<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>

첫 번째 그룹인 "Ratio"는 일반적인 옵션 그룹으로, 사용자가 자유롭게 항목을 선택할 수 있습니다. 반면 두 번째 그룹인 "Water"에는 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>

따라서 "Water" 그룹에 속한 모든 옵션(2L, 5L, 10L, 20L)은 회색으로 표시되어 비활성화되며, 방문자가 클릭하거나 선택할 수 없습니다. 이처럼 disabled 속성을 활용하면 특정 상황에서 선택을 막아야 하는 옵션들을 간편하게 제어할 수 있어, 폼(form) UI를 보다 유연하게 구성할 때 유용합니다.