입력 폼을 개발할 때 입력 요소를 동적으로 활성 또는 비활성 상태로 변경해야 하는 경우가 있습니다. 이러한 동작은 사용자 경험을 향상시키고 입력을 관리하는 데 도움이 됩니다. JavaScript를 사용하여 입력 요소의 활성/비활성 상태를 제어하는 방법을 알아보겠습니다.

HTML 입력 폼

가장 먼저, 입력 요소를 갖는 간단한 HTML 폼을 생성해봅시다.

<form>
  <input type="text" id="username" placeholder="사용자 이름">
  <input type="checkbox" id="enableInput" onchange="toggleInput()">
</form>

위 코드에서 username이라는 ID를 갖는 텍스트 필드와 enableInput이라는 ID를 갖는 체크박스를 포함하고 있습니다. 체크박스의 onchange 이벤트 핸들러를 통해 toggleInput 함수를 호출하도록 설정되어 있습니다.

JavaScript로 활성/비활성 상태 제어하기

이제 JavaScript를 사용하여 입력 요소의 활성/비활성 상태를 제어하는 방법을 알아봅시다.

function toggleInput() {
  var usernameInput = document.getElementById('username');
  var enableCheckbox = document.getElementById('enableInput');
  usernameInput.disabled = !enableCheckbox.checked;
}

toggleInput 함수는 체크박스의 상태에 따라 텍스트 필드를 활성화 또는 비활성화하는 역할을 합니다. 함수 내에서 getElementById 메서드를 사용하여 각 요소를 가져온 후, 체크박스의 checked 속성을 기반으로 텍스트 필드의 disabled 속성을 설정합니다.

이제 위 코드를 HTML 파일과 함께 사용하면, 사용자가 체크박스를 선택/해제할 때마다 텍스트 필드의 활성/비활성 상태가 변경될 것입니다.

결론

JavaScript를 사용하여 입력 요소의 상태를 제어하는 것은 웹 애플리케이션에서 사용자 상호작용을 관리하고 향상시키는 데 중요합니다. 이를 통해 더 나은 사용자 경험을 제공할 수 있으며, 입력을 관리하는 데 유용한 기능을 구현할 수 있습니다.

입력 폼에서 입력 요소의 활성/비활성 상태를 동적으로 변경해야 하는 경우가 있을 때 위의 예시를 참고하여 구현해보세요.