HTML에서 특정 요소나 요소 그룹을 비활성화하려면 disabled 속성을 사용합니다. 이 속성이 적용된 요소는 화면에 표시되지만 클릭, 입력 등의 사용자 상호작용이 차단되며, 일반적으로 회색으로 표시되어 비활성화 상태임을 직관적으로 알 수 있습니다.
disabled 속성을 지원하는 주요 요소
disabled 속성은 폼 관련 요소에 사용할 수 있으며, 대표적인 대상은 다음과 같습니다.
- <button> – 버튼
- <input> – 텍스트, 체크박스, 라디오 버튼 등 모든 입력 필드
- <select> – 드롭다운 목록
- <textarea> – 여러 줄 텍스트 입력 영역
- <optgroup>, <option>, <fieldset> – 옵션 그룹 및 필드셋 전체
사용 예제
아래 코드는 체크박스 목록과 함께 제출 버튼에 disabled 속성을 적용하여 버튼을 클릭할 수 없도록 만든 예제입니다.
<!DOCTYPE html> <html> <body> <p>어떤 스포츠를 좋아하시나요?</p> <form action = "" method = "get"> <input type = "checkbox" name = "vehicle" value = "football" checked> 축구<br> <input type = "checkbox" name = "vehicle" value = "cricket" checked> 크리켓<br> <input type = "checkbox" name = "vehicle" value = "hockey"> 하키<br> <input type = "submit" value = "Submit" disabled> </form> </body> </html>
JavaScript로 동적으로 활성화·비활성화하기
disabled 속성은 HTML에 직접 작성하는 것 외에도 JavaScript로 동적으로 제어할 수 있습니다. 예를 들어 특정 조건이 충족되었을 때 버튼을 활성화하는 방식은 다음과 같습니다.
// 요소 비활성화
document.getElementById("myButton").disabled = true;
// 요소 활성화
document.getElementById("myButton").disabled = false;참고 사항
disabled 속성이 설정된 입력 요소의 값은 폼 제출 시 서버로 전송되지 않습니다. 값을 유지하면서 편집만 막고 싶다면 readonly 속성을 사용하는 것이 좋습니다. 또한 CSS의 :disabled 선택자를 활용하면 비활성화된 요소에 별도의 스타일을 적용할 수 있습니다.