JavaScriptでボタンを有効または無効にする方法（状態に基づく）

入力フィールドが空かどうかに基づいてボタンを無効または有効にする方法を学びます。

Webでフォームに入力すると、すべてまたは一部のテキストフィールド（必須フィールド）に入力するまでフォームを送信できないことがよくあります。同じ原則がチェックボックスとラジオボタンにも当てはまります。

入力フィールドが空かどうかに基づいて、ボタンの状態（有効か無効か）を制御する方法は次のとおりです。

HTML

次のHTMLをエディタに追加します：

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

JavaScript

次のJavaScriptを追加します

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を使用して2つの変数を作成し、各要素への参照を格納します input ＆ボタン 。これで、各要素をプログラムで操作するための完全な制御が可能になりました。