HTML DOM의 Button disabled 속성은 <button> 요소의 disabled 속성과 연결된 속성으로, 특정 버튼이 현재 비활성화(disabled) 상태인지 여부를 설정하거나 반환하는 데 사용됩니다. 이 속성을 활용하면 버튼을 비활성화하여 사용자가 해당 요소와 더 이상 상호작용하지 못하도록 만들 수 있습니다. disabled 속성이 설정되면 대부분의 웹 브라우저에서는 해당 버튼이 기본적으로 회색으로 표시되어 비활성화 상태임을 시각적으로 알려줍니다.
문법(Syntax)
disabled 속성을 설정하는 기본 문법은 다음과 같습니다.
buttonObject.disabled = true|false
여기서 true 또는 false 값은 해당 버튼을 비활성화할지 여부를 결정합니다.
- true − 버튼이 비활성화됩니다.
- false − 버튼이 비활성화되지 않고 활성 상태로 유지됩니다.
그럼 button disabled 속성의 실제 사용 예제를 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<body>
<button id="Button1">BUTTON</button>
<p>아래 버튼을 클릭하면 위의 버튼이 비활성화됩니다.</p>
<button onclick="buttonDis()">CLICK IT</button>
<p id="Sample">
<script>
function buttonDis() {
document.getElementById("Button1").disabled = true;
var x = document.getElementById("Button1").disabled;
document.getElementById("Sample").innerHTML = "Button disabled is " + x;
}
</script>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
CLICK IT 버튼을 클릭하면 아래와 같이 첫 번째 버튼이 비활성화됩니다.
예제 코드 설명
위 예제의 작동 원리를 단계별로 살펴보겠습니다.
먼저 id가 “Button1”인 버튼을 생성했으며, 이 버튼은 기본적으로 활성(enabled) 상태입니다.
<button id="Button1">BUTTON</button>
다음으로 클릭 시 buttonDis() 함수를 실행하는 CLICK IT 버튼을 만들었습니다.
<button onclick="buttonDis()">CLICK IT</button>
buttonDis() 함수는 getElementById() 메서드를 통해 id가 “Button1”인 버튼 요소를 가져온 뒤, 해당 버튼의 disabled 속성을 true로 설정합니다. 버튼이 비활성화된 후에는 그 disabled 값(true 또는 false)을 변수 x에 저장하고, id가 “Sample”인 단락에 결과를 출력하여 화면에 표시합니다.
function buttonDis() {
document.getElementById("Button1").disabled = true;
var x = document.getElementById("Button1").disabled;
document.getElementById("Sample").innerHTML = "Button disabled is " + x;
}이처럼 HTML DOM의 disabled 속성을 사용하면 자바스크립트만으로 간단하게 버튼의 활성/비활성 상태를 제어할 수 있으며, 폼 제출 방지나 중복 클릭 차단 등 다양한 UI 시나리오에서 유용하게 활용할 수 있습니다.