HTML의 <option> 요소에서 disabled 속성은 드롭다운 목록 내 특정 옵션을 비활성화할 때 사용합니다. 이 속성이 적용된 옵션은 목록에 표시되긴 하지만 클릭하거나 선택할 수 없게 됩니다.
문법(Syntax)
disabled 속성의 기본 문법은 다음과 같습니다.
<option disabled>
disabled는 불리언(Boolean) 속성이므로 별도의 값을 지정하지 않고 속성 이름만 작성하면 됩니다.
예제(Example)
아래 예제를 통해 <option> 요소에 disabled 속성을 실제로 적용하는 방법을 살펴보겠습니다.
<!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)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다. optgroup 'Ratio' 그룹 아래의 '5:3' 옵션이 회색으로 표시되며 선택이 불가능한 상태임을 확인할 수 있습니다.
코드 분석
위 예제에서는 <select> 안에 두 개의 옵션 그룹(<optgroup>)을 만들고, 각 그룹 안에 여러 개의 옵션(<option>)을 배치했습니다.
<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>
여기서 '5:3' 옵션에 disabled 속성을 추가하여 해당 항목을 비활성화했습니다.
<option value="two" disabled>5:3</option>
이렇게 처리된 옵션은 사용자가 클릭해도 선택되지 않으며, 일반적으로 브라우저에서 흐린 색상으로 표시되어 비활성 상태임을 시각적으로 알려줍니다. 특정 옵션을 일시적으로 제공하고 싶지 않거나, 조건에 따라 선택을 제한해야 하는 경우에 disabled 속성을 활용하면 유용합니다.