HTML DOM Option disabled 속성 – 사용법과 실전 예제 총정리

HTML DOM의 option 요소 disabled 속성은 드롭다운 목록에서 특정 옵션이 비활성화되어 있는지 여부를 확인하고, 필요에 따라 활성화 또는 비활성화 상태로 변경할 수 있는 속성입니다.

문법(Syntax)

disabled 속성의 기본 문법은 다음과 같습니다.

1. 비활성화 상태 확인하기(값 반환)

object.disabled

2. 비활성화 상태 변경하기(값 설정)

object.disabled = true | false

true : 해당 옵션을 비활성화하여 선택할 수 없도록 합니다.
false : 해당 옵션을 다시 활성화하여 선택 가능하게 만듭니다.

예제(Example)

아래는 HTML DOM option disabled 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 드롭다운 목록의 '수학(Maths)' 과목이 비활성화됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.2rem;
   }
   .drop-down{
      width:35%;
      border:2px solid #fff;
      font-weight:bold;
      padding:8px;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Option disabled Demo</h1>
<p>안녕하세요! 좋아하는 과목을 선택해 주세요:</p>
<select class='drop-down' name="Drop Down List">
<option>물리학</option>
<option>수학</option>
<option>화학</option>
<option>영어</option>
</select>
<button onclick="disMaths()" class="btn">수학 비활성화</button>
<div class="show"></div>
<script>
   function disMaths() {
      document.querySelector(".drop-down").options[1].disabled=true;
      document.querySelector(".show").innerHTML="이제 수학 과목은 선택할 수 없습니다.";
   }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Option disabled 속성 – 사용법과 실전 예제 총정리

초기 상태에서는 물리학, 수학, 화학, 영어 네 개의 과목을 모두 자유롭게 선택할 수 있습니다.

이제 '수학 비활성화' 버튼을 클릭한 뒤, 드롭다운 목록에서 수학 과목을 선택해 보세요.

HTML DOM Option disabled 속성 – 사용법과 실전 예제 총정리

버튼 클릭 시 disMaths() 함수가 실행되어 options[1], 즉 두 번째 옵션인 '수학'의 disabled 값이 true로 설정됩니다. 그 결과 수학 항목은 회색으로 표시되며 더 이상 선택할 수 없게 됩니다.

핵심 정리

option.disabled는 불리언(Boolean) 값을 반환하므로, 조건문과 함께 활용하면 특정 옵션의 상태에 따라 동적인 UI 처리가 가능합니다.
select 요소의 options 컬렉션은 인덱스가 0부터 시작하므로, 위 예제에서 options[1]은 두 번째 항목인 '수학'을 가리킵니다.
disabled 속성은 HTML 태그에 직접 지정하는 방법(<option disabled>)과 자바스크립트로 동적으로 제어하는 방법 모두 지원합니다.