HTML DOM의 Input Checkbox disabled 속성은 웹 페이지에서 체크박스를 활성화하거나 비활성화할 수 있도록 상태를 설정하고, 현재 상태를 반환하는 속성입니다. 이 속성을 활용하면 특정 조건에 따라 사용자의 입력을 제어하는 동적인 폼을 쉽게 만들 수 있습니다.
문법(Syntax)
disabled 속성은 값을 가져오는 방식과 설정하는 방식 두 가지로 사용됩니다.
1. 현재 상태 반환하기
체크박스의 disabled 상태를 불리언(true/false) 값으로 반환합니다.
inputCheckboxObject.disabled
2. disabled 상태 설정하기
booleanValue를 지정하여 체크박스의 활성화 여부를 설정합니다.
inputCheckboxObject.disabled = booleanValue
불리언(Boolean) 값 종류
booleanValue에 사용할 수 있는 값과 그 의미는 다음과 같습니다.
| booleanValue | 설명 |
|---|---|
| true | 체크박스가 비활성화(disabled) 상태임을 의미합니다. 사용자가 클릭할 수 없습니다. |
| false | 체크박스가 비활성화되지 않은(활성화된) 상태임을 의미하며, 기본값(default)입니다. |
예제 코드
다음은 Input Checkbox disabled 속성을 활용한 실전 예제입니다. 처음에는 모든 과목 체크박스가 비활성화되어 있고, 버튼을 클릭하면 자바스크립트로 일괄 활성화됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
</head>
<body>
<form>
<div>
<input id="fullname" placeholder="eg: John Doe" type="text" name="fullname">
</div>
<div>
Biology: <input class="category" type="checkbox" value="Biology" name="subject" disabled>
Mathematics: <input class="category" type="checkbox" value="Mathematics" name="subject" disabled>
Physics: <input class="category" type="checkbox" value="Physics" name="subject" disabled>
Psychology: <input class="category" type="checkbox" value="Psychology" name="subject" disabled>
</div>
</form>
<button onclick="enableCheckboxes()">Enable Subjects</button>
<script>
function enableCheckboxes(){
var enableCheckboxes = document.getElementsByClassName("category");
for (var i = 0; i < enableCheckboxes.length; i++) {
enableCheckboxes[i].disabled = false;
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Enable Subjects' 버튼을 클릭하기 전 — 모든 과목 체크박스가 회색으로 표시되며 클릭해도 선택되지 않습니다.
'Enable Subjects' 버튼을 클릭한 후 — getElementsByClassName()으로 가져온 모든 체크박스의 disabled 값이 false로 변경되어 정상적으로 선택할 수 있게 됩니다.
정리
disabled 속성은 HTML 태그에 직접 작성할 수도 있고, 자바스크립트로 동적으로 제어할 수도 있습니다. 폼에서 특정 조건이 충족되기 전까지 입력을 막거나, 관리자 권한에 따라 필드를 잠글 때 등 다양한 상황에서 유용하게 활용됩니다.