• JavaScript

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

form内の一部のinput要素を入力無効にしたい。

ある条件判定があったら無効を解除したい。

本記事ではJavaScriptを使ってこのような悩みを解決します。

実装サンプル

See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

input-submit属性の送信ボタンが入力無効になってます。

テキストボックスに値が入力されると送信ボタンの入力無効が解除されボタンが押せるようになってます。

実装手順は以下の通りです。

任意のinput要素を無効にする

<input id="button" type="submit" disabled >

任意のinput要素を入力無効にするにはinputタグ内にdisabledを指定します。

これだけで入力が無効になります。

ある条件判定でdisabledを無効・解除する

// テキスト    
const text = document.getElementById('text');
// ボタン
const button = document.getElementById('button');
// テキストが入力されたら
text.addEventListener('keyup', (e) => {
// ボタンのdisabledを解除
  button.disabled = false;
});

disabledを解除するには、解除したい要素.disabled = false;で解除する事ができます。

逆に有効にしたい場合は有効にしたい要素.disabled = true;で有効にできます。

あとは条件判定式(本記事の例ではテキストボックスにテキストが入力されたら)内に上記無効にするコードを記述すればOKです。

以上の流れで実装完了です。

まとめ

お問い合わせフォームで必須項目が入力されてないと送信ボタンを押せないようにしたい。

そんな時本記事で紹介したdisabledとJacaScriptを使えば簡単に実装できます。

以上で解説を終わります。