jQueryでフォームのボタンを有効・無効にする

今回は、jQuery でフォームのボタンを有効・無効にする方法について紹介します。

フォーカスのボタンをクリックできないようにするには、button 要素などに対してdisabled 属性をjQuery で追加することで実装できます。

prop()、attr() でdisabled 属性を操作

jQueryで要素の属性を操作する時は、prop() かattr() を使います。この２つのメソッドの違いについて気になる方は、以下の記事を参考にしてみてください。

参照：prop()とattr()の違い

以下のようなbutton 要素を例に説明します。

送信

ボタンを無効にする（disabledをつける）

prop() メソッド
prop() を使いdisabled 属性をつけると、button要素は以下のようになり無効化されます。

$("#button").prop("disabled", true);

送信

attr() メソッド
attr() を使いdisabled 属性をつけると以下のようになり、prop() とは異なるのがわかります。

$("#button").attr('disabled', true);

送信

ボタンを有効にする（disabledをはずす）

prop() メソッド

$("#button").prop("disabled", false);

attr() メソッド

$("#button").attr('disabled', false);

removeAttr() メソッド

$('.someElement').removeAttr('disabled');

また古いバージョンのjQuery では、以下のようにattr() の第二引数に空文字を指定することでdisabledを外せましたが、現在のバージョンでは正常に動作しないので気をつけてください。

$('#button').attr('disabled', '');

チェックボックスで有効・無効を切り替える

よくある同意のチェックボックスにチェックが入ったらボタンを有効化するという実装のサンプルを紹介します。

以下のようなHTMLがあるとします。button 要素は無効化されており、「チェックしてください」というチェックボックスで有効・無効を切り替えます。

チェックしてください

送信

jQueryは以下のようになります。

$('#check').change(function() {
    // チェックが入っていたら有効化
    if ( $(this).is(':checked') ){
        // ボタンを有効化
        $('#button').prop('disabled', false);
    } else {
        // ボタンを無効化
        $('#button').prop('disabled', true);
    }
});

input要素の値が操作された時に実行されるchange()を使い、チェックボックスがONになっていたらdisabled 属性をはずしてボタンを有効化します。