[Javascript] 체크박스 선택 시, 텍스트 박스 활성화/비활성화 하기

 

이번 포스팅에서는

사용자가 체크박스를 선택했을 때, 텍스트 박스를 활성화하고

체크박스 선택을 해제했을 때, 텍스트 박스를 비활성화 하는 방법을 정리해보도록 하겠습니다.

 

 

체크박스 선택 시, 텍스트박스 활성화/비활성화 하기

다음 예제는 아래와 같이 동작합니다.

• 체크박스 선택 했을 때
  • 텍스트 박스 활성화
  • 텍스트 박스에 포커스
• 체크박스 선택해제 했을 때
  • 텍스트 박스 비활성화
  • 텍스트 박스 입력값 초기화

 

<label>
  <input type='checkbox'
         id='my_checkbox'
         onclick='toggleTextbox(this)'
  /> 기타 의견 입력
</label>

<input type='text'
       id='my_text'
       disabled />

function toggleTextbox(checkbox) {
  
  // 1. 텍스트 박스 element 찾기
  const textbox_elem = document.getElementById('my_text');
  
  // 2-1. 체크박스 선택여부 체크
  // 2-2. 체크박스 선택여부에 따라 텍스트박스 활성화/비활성화
  textbox_elem.disabled = checkbox.checked ? false : true;
  
  // 3. 텍스트박스 활성화/비활성화 여부에 따라
  // - 텍스트박스가 비활성화 된 경우 : 텍스트박스 초기화
  // - 텍스트박스가 활성화 된 경우 : 포커스 이동
  if(textbox_elem.disabled) {
    textbox_elem.value = null;
  }else {
    textbox_elem.focus();
  }
}

 

  HTML  

체크박스와 텍스트박스가 있습니다.

체크박스를 선택하면, toggleTextbox() 함수를 호출합니다.

 

 

  JAVASCRIPT  

toggleTextbox() 함수는

파라미터로 입력받은 checkbox element가 선택된 상태인지를 체크하여

텍스트 박스를 활성화/비활성화 하고,

텍스트 박스의 활성화/비활성화 상태에 따라

텍스트 박스를 초기화하거나, focus를 이동시킵니다.