Written by Kasumi

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を使えば簡単に実装できます。

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

目次

関連記事

JavaScript

【JavaScript】配列をテーブル形式でコンソールに出力する方法

2023.01.29
1286
JavaScript

JavaScriptで配列とオブジェクトを比較。重複した値を持つ要素だけ取得する方法

2022.12.24
2903
JavaScript

【JavaScript】スクロールを終えた後に任意の処理を実行する方法

2023.02.21
546
JavaScript

【簡単】JavaScriptを使って任意の文字列が配列内にあるか検索する方法【indexOfメソッド】

更新日:2022.09.09
488