JavaScript: フォーム部品の有効・無効を切り替える

JavaScriptでボタンやテキスト入力ボックス等のフォーム部品の有効・無効を切り替える場合は、 disabled属性を変更します。

コード例


var btn = document.getElementById('btnID');

btn.disabled = true;   // 無効

btn.disabled = false;  // 有効

「disabled」という単語が無効という意味なので、trueで無効、falseで有効となります。

フォーム部品を無効にしてみる

ボタン、テキストボックス、チェックボックス、プルダウンメニュー、複数行テキスト入力ボックスを 無効にすると下のような状態になります。

チェックボックス

まとめて有効・無効を切り替えたい場合のコード例

一括で有効・無効を切り替えたい場合のコード例を紹介します。

ここではフォーム部品にクラス名(class="test")をつけます。 あとは、取得した要素に対してdisabledを設定するだけです。


<p><button id="btn" class="test">ボタン</button></p>
<p><input type="text" value="1行テキスト" class="test"></p>
<p><textarea class="test">複数行テキスト</textarea></p>

<script>
    var test = document.getElementsByClassName('test');
    for (var i = 0; i < test.length ; i++){
        test[i].disabled = true;  // 無効にする
    }
</script>
JavaScript入門