HTML DOM Input Radio disabled 속성 – 라디오 버튼 비활성화 방법 총정리

HTML DOM의 Input Radio disabled 속성은 라디오 버튼을 비활성화할지 여부를 설정하거나 현재 상태를 반환하는 데 사용됩니다. 이 속성은 불리언(Boolean) 값을 사용하며, true이면 해당 요소가 비활성화되고, false이면 활성 상태를 유지합니다. 기본값은 false로 설정되어 있습니다.

비활성화된(disabled) 요소는 기본적으로 회색으로 표시되며 사용자가 클릭할 수 없습니다.

구문(Syntax)

disabled 속성을 설정하는 구문은 다음과 같습니다.

radioObject.disabled = true|false;

여기서 true는 라디오 버튼이 비활성화됨을 의미하고, false는 비활성화되지 않음을 의미합니다. 기본값은 false입니다.

예제(Example)

Input Radio의 disabled 속성을 활용한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input radio disabled Property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>
<p>아래 DISABLE 버튼을 클릭하여 위의 라디오 버튼을 비활성화하세요</p>
<button type="button" onclick="disableRadio()">DISABLE</button>
<p id="Sample"></p>
<script>
    function disableRadio() {
        document.getElementById("Mango").disabled=true;
        document.getElementById("Sample").innerHTML = "The radio button is now disabled";
    }
</script>
</body>
</html>

출력 결과(Output)

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

HTML DOM Input Radio disabled 속성 – 라디오 버튼 비활성화 방법 총정리

DISABLE 버튼을 클릭하면 아래와 같이 변경됩니다.

HTML DOM Input Radio disabled 속성 – 라디오 버튼 비활성화 방법 총정리

예제 코드 분석

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. 라디오 버튼 생성

먼저 폼(form) 안에 type="radio", name="fruits", id="Mango" 속성을 가진 input 요소를 생성했습니다.

<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>

2. DISABLE 버튼 생성

다음으로, 사용자가 클릭하면 disableRadio() 함수를 실행하는 DISABLE 버튼을 만들었습니다.

<button type="button" onclick="disableRadio()">DISABLE</button>

3. disableRadio() 함수 동작

disableRadio() 함수는 getElementById() 메서드를 사용해 해당 라디오 타입의 input 요소에 접근한 뒤, disabled 속성을 true로 설정합니다. 그 결과 라디오 버튼은 회색으로 표시되며 더 이상 사용자가 조작할 수 없게 됩니다.

function disableRadio() {
    document.getElementById("Mango").disabled=true;
    document.getElementById("Sample").innerHTML = "The radio button is now disabled";
}

이처럼 disabled 속성을 활용하면 특정 조건에서 사용자의 선택을 제한하거나, 폼 제출 시 유효하지 않은 옵션을 사전에 차단하는 등 다양한 UI 제어가 가능합니다.