HTML DOM Fieldset disabled 속성 – 폼 요소 그룹 한 번에 활성화·비활성화하기

HTML DOM의 Fieldset disabled 속성은 특정 <fieldset> 요소 내부에 포함된 입력 요소들의 그룹 전체를 비활성화(disabled)하는 데 사용됩니다. 이 속성을 true로 설정하면 해당 필드셋 안의 모든 요소가 비활성화되고, false로 설정하면 다시 활성화됩니다. 기본값은 false, 즉 활성화 상태입니다.

비활성화된 요소는 대부분의 브라우저에서 회색으로 표시되며, 사용자가 클릭하거나 값을 입력할 수 없습니다. 따라서 특정 조건에서 폼 입력을 잠그거나 읽기 전용 상태로 만들고 싶을 때 유용하게 활용할 수 있습니다.

구문(Syntax)

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

속성 값 설정하기

fieldsetObj.disabled = true|false

속성 값 반환받기

fieldsetObj.disabled

예제(Example)

버튼 클릭으로 필드셋을 활성화·비활성화하는 실전 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function FieldDisable() {
        document.getElementById("FieldSet1").disabled = true;
    }
    function FieldEnable() {
        document.getElementById("FieldSet1").disabled = false;
    }
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form>
<fieldset id="FieldSet1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>
<br>
<button onclick="FieldEnable()">Enable</button>
<button onclick="FieldDisable()">Disable</button>
<p>Enable 버튼을 누르면 필드셋이 활성화되고, Disable 버튼을 누르면 비활성화됩니다.</p>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 이름, 주소, 나이 입력란이 하나의 필드셋으로 묶인 폼과 두 개의 버튼이 화면에 나타납니다.

HTML DOM Fieldset disabled 속성 – 폼 요소 그룹 한 번에 활성화·비활성화하기

Disable 버튼을 클릭한 경우 −

HTML DOM Fieldset disabled 속성 – 폼 요소 그룹 한 번에 활성화·비활성화하기

코드 상세 분석

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

1. 필드셋으로 폼 요소 그룹화

먼저 <fieldset> 요소로 여러 입력 필드를 묶고, id 속성을 "FieldSet1"로 지정했습니다. <legend> 태그를 사용해 그룹의 제목도 함께 표시했습니다.

<form>
<fieldset id="FieldSet1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>

2. 제어 버튼 생성

각각 FieldEnable() 함수와 FieldDisable() 함수를 호출하는 "Enable", "Disable" 두 개의 버튼을 만들었습니다.

<button onclick="FieldEnable()">Enable</button>
<button onclick="FieldDisable()">Disable</button>

3. disabled 속성으로 활성화·비활성화 제어

FieldDisable() 함수는 필드셋의 disabled 속성을 true로 설정해 내부 요소들을 비활성화하고, FieldEnable() 함수는 false로 설정해 다시 활성화합니다. 이렇게 하면 지정된 필드셋 안의 모든 요소를 한 번에 제어할 수 있습니다.

function FieldDisable() {
    document.getElementById("FieldSet1").disabled = true;
}
function FieldEnable() {
    document.getElementById("FieldSet1").disabled = false;
}

이처럼 Fieldset의 disabled 속성을 활용하면 개별 input 요소마다 일일이 disabled를 지정하지 않고도 그룹 단위로 폼 요소의 사용 가능 여부를 손쉽게 관리할 수 있습니다.