JavaScript/jQueryで、クラスが.btn
や.btn-primary
の<button>
や<input>
、<a>
の要素を無効にすることができず、困っています。
私は以下のスニペットを使ってこれを行いました。
$('button').addClass('btn-disabled');
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);
つまり、$('button').addClass('btn-disabled');
を要素に与えるだけで、視覚的には無効になったように見えますが、機能は変わらず、それでもクリックできるので、attr
とprop
の設定を要素に追加した理由になります。
これと同じ問題を経験した人はいますか?TwitterのBootstrapを使用していますが、この方法は正しいのでしょうか?
これを行う最も簡単な方法は、最初の質問で行ったように、disabled
属性を使用することです。
<button class="btn btn-disabled" disabled>ボタンの内容</button>
今のところ、Twitter Bootstrapには、disabled
属性を使わずにボタンの機能を無効にする方法がありません。
とはいえ、これは彼らのjavascriptライブラリに実装されるべき素晴らしい機能でしょう。
ボタン/アンカー/リンクを無効にするためにどのような属性が追加されても、ブートストラップはそれにスタイルを追加しているだけで、onclickイベントが残っている間はユーザーはまだそれをクリックすることができます。ですから、私の簡単な解決策は、それが無効になっているかどうかをチェックし、onclickイベントを削除/追加することです。
if (!('#button').hasAttr('disabled'))
$('#button').attr('onclick', 'someFunction();');
else
$('#button').removeattr('onclick');