Twitter Bootstrap：删除/切换类似复选框的按钮组的活动状态答案

【问题标题】：Twitter Bootstrap: Remove/Toggle the active state of checkbox-like button groupTwitter Bootstrap：删除/切换类似复选框的按钮组的活动状态
【发布时间】：2012-07-19 22:21:09
【问题描述】：

使用 twitters Bootstrap，我创建了一个带有单选框行为的按钮组，让用户在不同的状态之间进行选择。这按预期开箱即用。

我在这里安排了一个带有示例的 jsFiddle：http://jsfiddle.net/jpxWj/

我尝试（并且想要）的是，当我第二次单击活动按钮时，可以移除按下状态。

我尝试使用 jQuerys removeClass() 从 btn 类中删除 active 类，但它不起作用。 （我也尝试使用 .on() 删除，但这只会使活动始终隐藏/删除）

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

Here you go，在我看来，这是一个相当未知的事件现象。你可以阅读更多关于它的信息here。

编辑：

详细说明，一个简单的.removeClass 不起作用的原因是因为有多个侦听器，侦听同一个事件。所以当click 事件被触发时，一个普通的.removeClass 会删除这个类，但是Twitter Bootstrap 处理程序会再次添加它！要防止任何其他处理程序在您的处理程序之后执行，您可以执行e.stopPropagation。但是，这不会停止附加到与您的相同元素的处理程序，它只会停止树上更远的处理程序。要完全确保在您的处理程序之后没有执行其他处理程序，您可以使用event.stopImmediatePropagation()。

【讨论】：

这太好了 - 非常感谢！我确实尝试过event.preventDefault()，但它没有用。 event.stopImmediatePropagation() 按预期工作。我更新了 jsFiddle 以缩小范围：jsfiddle.net/jpxWj/2 再次感谢您的提示和帮助！
没问题，我添加了一些说明，认为它可能会有所帮助。
嘿，它不起作用 - 可能是它在 bootstrap 3 中不起作用？
@Dejell，我必须将 e.preventDefault(); 和 e.stopImmediatePropagation(); 结合起来才能使其在引导程序 3 中正常工作，如下所述。

【解决方案2】：

引导程序 3 更新：

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

【讨论】：

添加 e.stopImmediatePropagation(); 对我有用。