JavaScript로 버튼을 활성화 및 비활성화하는 방법(상태 기반)

입력 필드가 비어 있는지 여부에 따라 버튼을 비활성화하거나 활성화하는 방법을 알아보세요.

웹에서 양식을 작성할 때 전체 또는 일부 텍스트 필드(필수 필드)가 채워질 때까지 양식을 제출할 수 없는 경우가 많습니다. 체크박스와 라디오 버튼에도 동일한 원칙이 적용됩니다.

다음은 입력 필드가 비어 있는지 여부에 따라 버튼의 상태(활성화 및 비활성화)를 제어하는 ​​방법입니다.

HTML

편집기에 다음 HTML을 추가하십시오.

<input class="input" type="text" placeholder="fill me" />
<button class="button">Click Me</button>

자바스크립트

다음 자바스크립트 추가

let input = document.querySelector(".input")
let button = document.querySelector(".button")

button.disabled = true

input.addEventListener("change", stateHandle)

function stateHandle() {
  if (document.querySelector(".input").value === "") {
    button.disabled = true
  } else {
    button.disabled = false
  }
}

이제 입력 필드가 비어 있는 동안 비활성화되고 채우기 시작하는 즉시 활성화되는 버튼이 있습니다.

작동하는 모든 코드가 포함된 데모를 확인하세요.

데모 코드.

HTML 및 JavaScript 코드 작동 방식

먼저 두 개의 HTML 요소, 입력 필드 및 버튼을 정의합니다. 그런 다음 JavaScript를 사용하여 각 요소 input에 대한 참조를 저장할 두 개의 변수를 만듭니다. &button . 이제 프로그래밍 방식으로 각 요소를 조작할 수 있는 모든 권한을 갖게 되었습니다.

버튼의 상태를 비활성화하는 것으로 시작합니다. 기본적으로 버튼의 상태는 활성화입니다. HTML에서. disabled = true 사용 버튼은 이제 사용자의 UI에서 회색으로 표시됩니다(비활성화됨).

그런 다음 이벤트 핸들러(addEventListener ) input 이벤트 속성이 있는 변수 change , 요소와의 상호 작용을 수신 대기(감시)하는 속성입니다. 이 경우 사용자가 입력 필드에 입력하여 상호 작용할 때를 알고 함수를 실행하여 해당 이벤트에 반응합니다.

우리가 실행하는 함수는 stateHandler라고 합니다. 입력 필드 내부에 변경 사항이 있을 때마다 실행됩니다.

stateHandler 내부의 코드는 "입력 필드의 값이 빈 문자열(=== '' ) 그런 다음 버튼을 비활성화하고, 그렇지 않으면 (else ) 활성화합니다.