HTML DOM의 input month disabled 속성은 HTML 문서에서 type="month"로 지정된 입력 필드가 현재 비활성화(disabled) 상태인지 여부를 확인하고, 필요에 따라 그 상태를 변경할 수 있게 해주는 속성입니다. 이 속성은 불리언(Boolean) 값을 다루며, 필드가 비활성화된 경우 true, 활성화된 경우 false를 반환합니다.
문법(Syntax)
기본적인 사용 문법은 다음과 같습니다.
1. disabled 값 반환하기
object.disabled
2. disabled 값 설정하기
object.disabled = true | false
예제(Example)
버튼을 클릭할 때마다 월(month) 입력 필드를 비활성화하거나 다시 활성화하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.2rem;
}
input{
width:35%;
border:2px solid #fff;
background-color:transparent;
color:#fff;
font-weight:bold;
padding:8px;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Input Month disabled 속성 예제</h1>
<p>안녕하세요! 태어난 월을 입력해 보세요.</p>
<input type='month' class='monthInput'>
<button onclick='disEna()' class='btn'>비활성화 / 활성화</button>
<div class='show'></div>
<script>
function disEna() {
var monthInput = document.querySelector('.monthInput');
var showMsg = document.querySelector('.show');
showMsg.innerHTML = '';
if (monthInput.disabled === true){
monthInput.disabled = false;
showMsg.innerHTML = '이전에는 비활성화 상태였지만, 지금은 활성화되었습니다.';
} else {
monthInput.disabled = true;
showMsg.innerHTML = '이전에는 활성화 상태였지만, 지금은 비활성화되었습니다.';
}
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'비활성화 / 활성화' 버튼을 클릭하면 월 입력 필드가 비활성화되며, 버튼을 한 번 더 클릭하면 필드가 다시 활성화됩니다.
핵심 포인트 정리
- disabled 속성은 항상
true또는false값을 반환합니다. true로 설정하면 사용자가 해당 입력 필드를 조작할 수 없습니다.- 비활성화된 입력 필드의 값은 폼 제출 시 서버로 전송되지 않으므로 주의해야 합니다.
type="month"입력 필드는 Chrome, Edge, Opera 등에서 지원되지만, Firefox 등 일부 브라우저는 지원하지 않으므로 크로스 브라우징 호환성을 고려해야 합니다.