Twitter Bootstrap：チェックボックスのようなボタングループのアクティブ状態を削除/切り替えます

Question

twitters Bootstrap私は、ラジオボックスの動作を持つボタングループを作成しました。これは想定どおりの状態で動作します。

私はここでの例でjsFiddleを配し：私が試した（としたい）とは何http://jsfiddle.net/jpxWj/

は私がアクティブなボタン二回目をクリックしたときに押された状態を除去することができるということです。

btnクラスからactiveクラスを削除するにはjQuerys removeClass()を試しましたが、動作しません。 （私も.on()を削除しようとしましたが、これは単に常に削除/隠されたアクティブを維持します）

Answer 1

Here you go、私の意見ではかなりの未知のイベント現象、。あなたはそれについての詳細を読むことができますhere。

編集：同じイベントに耳を傾け、複数のリスナーがあるため

はellaborateするには、簡単な.removeClassが動作しない理由は、あります。したがって、clickイベントが発生すると、通常の.removeClassがそのクラスを削除しますが、Twitterのブートストラップハンドラが再度追加します。あなたの後に他のハンドラが実行されないようにするには、e.stopPropagationを実行します。しかし、これはあなたと同じ要素に付けられたハンドラーを止めるわけではなく、ツリーの上にあるハンドラーだけを止める。あなたの後に他のハンドラが実行されていないことを完全に確認するには、event.stopImmediatePropagation()を使用できます。

Answer 2

ブートストラップ3更新：

$('body').on('click', '.btn-group .btn.active',function(e){ 
     e.preventDefault(); 
     e.stopImmediatePropagation(); 
     $(this).find('input').removeAttr('checked'); 
     $(this).removeClass('active'); 
    });