HTML DOM Input Week disabled 속성 – 문법과 예제로 배우는 활용법

Input Week disabled 속성이란?

Input Week disabled 속성은 HTML에서 <input type="week"> 요소로 만들어진 주(week) 입력 필드가 활성화(enabled) 상태인지 비활성화(disabled) 상태인지를 확인하거나 설정할 때 사용하는 JavaScript 속성입니다.

이 속성을 활용하면 특정 조건에 따라 사용자가 주 선택 필드를 조작하지 못하도록 잠그거나, 반대로 버튼 클릭 등의 이벤트를 통해 잠긴 필드를 다시 활성화할 수 있습니다.

문법(Syntax)

disabled 속성은 아래 두 가지 방식으로 사용할 수 있습니다.

1. 현재 상태 반환 (불리언 값)

inputWeekObject.disabled

입력 필드가 비활성화되어 있으면 true, 활성화되어 있으면 false를 반환합니다.

2. 상태 설정

inputWeekObject.disabled = booleanValue

booleanValue 자리에 true 또는 false를 넣어 필드의 활성화 여부를 직접 지정할 수 있습니다.

booleanValue 값의 종류

값	설명
true	주(week) 입력 필드가 비활성화된 상태임을 의미합니다.
false	주 입력 필드가 비활성화되지 않은(활성화된) 상태임을 의미하며, 이 값이 기본값입니다.

예제 코드

아래 예제는 처음에는 비활성화된 주 입력 필드를 버튼 클릭 한 번으로 활성화하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>Week-disabled</legend>
<label for="WeekSelect">Sales Target Week:
<input type="week" id="WeekSelect" value="2020-W13" disabled>
</label>
<input type="button" onclick="enableWeekInput()" value="Change Sales Target Week">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
    function enableWeekInput() {
        inputWeek.disabled = false;
        divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
    }
</script>
</body>
</html>

코드 동작 원리

입력 필드에 disabled 속성이 미리 지정되어 있어 페이지 로드 시 비활성화 상태로 시작합니다.
페이지가 열리면 divDisplay 영역에 현재 disabled 상태(true)가 표시됩니다.
'Change Sales Target Week' 버튼을 클릭하면 enableWeekInput() 함수가 실행되어 inputWeek.disabled = false;로 필드가 활성화됩니다.
상태 변경 후 화면의 표시 내용도 false로 갱신됩니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.

버튼 클릭 전 – 주 입력 필드가 회색으로 표시되며 조작할 수 없고, disabled 상태가 true로 출력됩니다.

HTML DOM Input Week disabled 속성 – 문법과 예제로 배우는 활용법

버튼 클릭 후 – 주 입력 필드가 활성화되어 사용자가 직접 주를 선택할 수 있게 되며, disabled 상태가 false로 출력됩니다.

HTML DOM Input Week disabled 속성 – 문법과 예제로 배우는 활용법

참고 사항

type="week" 입력 필드는 Chrome, Opera, Edge 등 일부 브라우저에서만 지원되므로, 크로스 브라우징이 필요하다면 대체 UI를 고려해야 합니다.
비활성화된 입력 필드는 폼 제출 시 값이 서버로 전송되지 않으므로, 데이터 보존이 필요한 경우 readonly 속성 사용을 검토하세요.
CSS의 :disabled 가상 클래스를 함께 사용하면 비활성화 상태의 필드에 시각적 스타일을 적용할 수 있습니다.