web-dev-qa-db-ja.com

Twitterのブートストラップでボタンを無効にする最良の方法

JavaScript/jQueryでクラス<button>または<input>を持つ<a>、.btnまたは.btn-primary要素を無効にすることになると、私は混乱します。

そのために次のスニペットを使用しました。

$('button').addClass('btn-disabled');
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);

そのため、$('button').addClass('btn-disabled');を自分の要素に提供しただけでは、視覚的に無効として表示されますが、機能は変わりませんが、クリック可能になります。そのため、attrおよびprop設定を要素に追加した理由。

誰かがこの同じ問題をそこで期限切れにしましたか？ TwitterのBootstrapを使用している間 - これはこれを行うための正しい方法ですか？

javascriptjquerybuttontwitter-bootstrap
247
user1386320

あなたは$('button').prop('disabled', true);部分を必要とするだけで、ボタンは自動的に無効化されたクラスを取ります。

313
Samuel Robert

入力とボタンの場合：

$('button').prop('disabled', true);

アンカーの場合：

$('a').attr('disabled', true);

Firefoxでチェックイン、クロム。

http://jsfiddle.net/czL54/2/ /を参照してください。

113
Jeroen K

jeroenk's answer を築き上げると、次のようになります。

$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually + functionally

$('input[type=button]').addClass('disabled'); // Disables visually
$('input[type=button]').prop('disabled', true); // Disables visually + functionally

$('a').addClass('disabled'); // Disables visually
$('a').prop('disabled', true); // Does nothing
$('a').attr('disabled', 'disabled'); // Disables visually

fiddle を参照してください。

83
Yarin

これを行う最も簡単な方法は、元の質問で行ったようにdisabled属性を使用することです。

<button class="btn btn-disabled" disabled>Content of Button</button>

今のところ、Twitter Bootstrapにはdisabled属性を使わずにボタンの機能を無効にする方法はありません。

それにもかかわらず、これは彼らが彼らのjavascriptライブラリに実装するための優れた機能となるでしょう。

32
1234567
<div class="bs-example">
      <button class="btn btn-success btn-lg" type="button">Active</button>
      <button class="btn btn-success disabled" type="button">Disabled</button>
</div>
29
Vicky