HTML DOM 입력 버튼 disabled 속성 사용법 완벽 정리

HTML DOM에서 input 버튼의 disabled 속성은 HTML 문서 내 입력 버튼(input type="button")의 disabled 속성 값을 가져오거나 변경할 수 있는 기능을 제공합니다. 이 속성을 활용하면 자바스크립트만으로 버튼을 동적으로 비활성화하거나 다시 활성화할 수 있습니다.

문법(Syntax)

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

1. 현재 값 반환하기

object.disabled

버튼이 비활성화 상태이면 true, 활성화 상태이면 false를 반환합니다.

2. 값 변경하기

object.disabled = true|false

true를 설정하면 버튼이 비활성화되고, false를 설정하면 다시 활성화됩니다.

예제(Example)

버튼을 클릭하면 해당 버튼이 비활성화되는 간단한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM disabled Property</title>
<style>
    body{
        text-align:center;
    }
    .btn{
        display:block;
        margin:1rem auto;
        background-color:#db133a;
        color:#fff;
        border:1px solid #db133a;
        padding:0.5rem;
        border-radius:50px;
        width:80%;
    }
    .show-message{
        font-weight:bold;
        font-size:1.4rem;
        color:#ffc107;
    }
</style>
</head>
<body>
<h1>disabled Property Example</h1>
<input type="button" onclick="disableMe()" class="btn" value="Click me to Disable me">
<div class="show-message"></div>
<script>
    function disableMe() {
        var btn= document.querySelector(".btn");
        btn.disabled = true;
        document.querySelector(".show-message").innerHTML="Previously I'm enabled but now I'm disabled";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM 입력 버튼 disabled 속성 사용법 완벽 정리

이제 "Click me to Disable me" 버튼을 클릭해 보세요. 클릭하는 순간 빨간색 버튼이 비활성화되어 더 이상 클릭할 수 없게 됩니다.

HTML DOM 입력 버튼 disabled 속성 사용법 완벽 정리

핵심 포인트 정리

disabled 속성은 불리언(Boolean) 값으로 동작하며, true/false로 버튼 상태를 제어합니다.
비활성화된 버튼은 클릭 이벤트가 발생하지 않으며, 시각적으로도 회색조로 표시되는 것이 일반적입니다.
폼 제출 시 disabled가 설정된 입력 요소의 값은 서버로 전송되지 않으므로 주의가 필요합니다.
자바스크립트의 querySelector() 등으로 요소를 선택한 후 속성에 직접 접근하여 손쉽게 상태를 변경할 수 있습니다.