HTML DOM에서 Input DatetimeLocal 요소의 disabled 속성은 날짜·시간 입력 필드가 활성화되어 있는지, 아니면 비활성화되어 있는지를 확인하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 사용자의 상호작용 여부를 동적으로 제어할 수 있어 폼 유효성 관리나 단계별 입력 흐름 구성에 매우 유용합니다.
문법(Syntax)
disabled 속성은 값을 읽고 쓰는 두 가지 방식으로 사용할 수 있습니다.
1. 현재 상태 반환하기
입력 필드의 비활성화 여부를 불리언 값(true/false)으로 반환합니다.
inputDatetimeLocalObject.disabled
2. 비활성화 상태 설정하기
불리언 값을 할당하여 입력 필드를 활성화하거나 비활성화합니다.
inputDatetimeLocalObject.disabled = booleanValue
불리언 값(Boolean Values)
booleanValue에 사용할 수 있는 값과 그 의미는 다음과 같습니다.
| booleanValue | 설명 |
|---|---|
| true | datetime-local 입력 필드가 비활성화되어 사용자가 값을 수정할 수 없습니다. |
| false | datetime-local 입력 필드가 활성화되어 있으며, 이 값이 기본값(default)입니다. |
예제(Example)
다음은 Input DatetimeLocal의 disabled 속성을 실제로 활용한 예제입니다. 초기에는 시험 일시 입력 필드가 비활성화되어 있고, 버튼을 클릭하면 필드가 활성화되도록 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal Disabled</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Datetime-Local-disabled</legend>
<label for="datetimeLocalSelect">Examination Time:
<input type="datetime-local" id="datetimeLocalSelect" value="2019-07-05T20:45" disabled>
</label>
<input type="button" onclick="enableDatetimeLocalInput()" value="Change Examination Date and Time">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
divDisplay.textContent = 'DatetimeLocal Input disabled: '+inputDatetimeLocal.disabled;
function enableDatetimeLocalInput() {
inputDatetimeLocal.disabled = false;
divDisplay.textContent = 'DatetimeLocal Input disabled: '+inputDatetimeLocal.disabled;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Change Examination Date and Time' 버튼을 클릭하기 전 — 입력 필드가 비활성화(disabled: true)된 상태로 표시됩니다.
'Change Examination Date and Time' 버튼을 클릭한 후 — disabled 속성이 false로 변경되어 시험 일시를 자유롭게 수정할 수 있게 됩니다.
정리
disabled 속성은 단순히 true/false만으로 입력 필드의 사용 가능 여부를 손쉽게 제어할 수 있습니다. 특히 조건에 따라 폼 요소를 잠그거나 해제해야 하는 상황에서 유용하게 활용할 수 있으며, JavaScript와 함께 사용하면 더욱 동적인 사용자 경험을 만들 수 있습니다.