2017年4月5日

jQueryでdisabledを切り替える時の注意点

ボタンの連打を防ぐため、クリックされたらボタンに「disabled=true」を付与してクリックできないようにし、処理が終わったら「disabled=false」とする。フォームの処理などで使うことの多い仕様ですが、記述を間違えて意外とハマりがちなので、動作しないと思ったら下記を確認してみて下さい。

間違い

/*設定*/
$("button").attr('disabled ','disabled');
/*解除*/
$("button").attr('disabled ',false);

正解

/*設定*/
$("button").prop('disabled', true);
/*解除*/
$("button").prop('disabled', false);

属性で判断したいので「attr」と思いがちですが、「attr」は属性の値を取得する際に使用し、trueかfalseかを判断するなら「prop」を使用しましょう。

, ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です