Javascript - 체크박스 선택/해제 시, 텍스트박스 활성화/비활성화

체크박스 체크 또는 해제 시, 텍스트 박스를 활성화/비활성화하여 사용자가 텍스트를 입력할 수 있도록 하거나 못하도록 만들 수 있습니다.

체크박스 선택에 따라 텍스트박스 활성화/비활성화

HTML

HTML은 아래와 같이 체크박스와 텍스트박스를 추가하였습니다.

• 기본적으로 체크 박스는 체크가 해제되어있고, 텍스트 박스는 비활성화 되어있음

<input type="checkbox" id="checkbox">
<input type="text" id="textbox" disabled>

Javascript

Javascript에서는 먼저 checkbox와 textbox 요소(element)를 찾고, checkbox에 change에 대한 이벤트 리스너를 설정합니다. 체크박스의 상태가 변경될 때, checked 값에 따라서 텍스트박스의 활성화 상태를 변경합니다.

• checked = true : textbox 활성화
• checked = false : textbox 비활성화
• textbox의 disabled 값이 true/false일 때 비활성화/활성화

const checkbox = document.getElementById('checkbox');
const textbox = document.getElementById('textbox');

checkbox.addEventListener('change', function() {
    if (this.checked) {
        textbox.disabled = false;
    } else {
        textbox.disabled = true;
    }
});

Output: