Javascript - 버튼 활성화/비활성화 시키는 방법

Javascripthtml

Javascript로 버튼을 활성화 또는 비활성화 상태로 만드는 방법에 대해서 알아보겠습니다.

버튼의 상태(활성화, 비활성화) 변경

토글 버튼을 누르면, 버튼이 활성화/비활성화 상태로 전환되는 예제입니다.

HTML

myButton은 활성화된 상태이며, toggleButton을 누를 때마다 활성화/비활성화 상태를 토글합니다. 토글 버튼을 누를 때 toggleButton() 함수를 실행하며, 이 함수에서 버튼의 상태를 변경합니다.

<button id="myButton">활성화</button>
<button id="toggleButton" onclick="toggleButton()">토글</button>

Javascript

button.disabled이 true이면 버튼은 비활성화 상태이며, false는 활성화 상태를 의미합니다.

innerText는 버튼에 보이는 텍스트로, 버튼 상태를 변경하면서 이름도 함께 변경하고 있습니다.

function toggleButton() {
  var button = document.getElementById("myButton");
  var toggle = document.getElementById("toggleButton");

  if (button.disabled) {
    button.disabled = false;
    button.innerText = "활성화";
  } else {
    button.disabled = true;
    button.innerText = "비활성화";
  }
}

버튼 활성화, 비활성화 (HTML)

<button />에 아무것도 표시하지 않으면 활성화된 버튼이며, disabled를 입력하면 비활성화 상태의 버튼이 됩니다.

<button id="myButton1">활성화</button>
<button id="myButton2" disabled>비활성화</button>
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha