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側で入力フィールドとボタンの2つの要素を定義します。次にJavaScriptで input と button の2つの変数を作成し、それぞれの要素への参照を格納します。これにより、各要素をプログラムから自由に操作できるようになります。

最初に行うのは、ボタンを無効化することです。HTMLでは、ボタンの初期状態は「有効（enabled）」になっています。disabled = true を設定すると、UI上でボタンがグレーアウトされ、ユーザーにはクリックできない状態として表示されます。

次に、input 変数に対してイベントリスナー（addEventListener）を登録し、監視するイベントとして change を指定します。これは要素とのやり取りを監視するための仕組みです。今回は「ユーザーが入力フィールド内でタイピングしたタイミング」を検知し、そのイベントに反応して関数を実行したいわけです。

実行される関数は stateHandle という名前で、入力フィールドの中身が変わるたびに呼び出されます。

stateHandle 内のコードは、「もし入力フィールドの値が空文字列（=== ''）であればボタンを無効化し、そうでなければ（else）有効化する」というシンプルな条件分岐を行っています。