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

Question

使用Twitter的Bootstrap，我创建了一个按钮组并设置单选框行为，以便让用户在不同状态之间进行选择。这可以直接使用，效果如预期。

我在这里安排了一个jsFiddle示例：http://jsfiddle.net/jpxWj/ 我尝试过（并希望）当我第二次点击活动按钮时，可以取消按下状态。

我尝试使用jQuery的removeClass()从btn类中删除active类，但它不起作用。（我还尝试使用.on()删除，但这只会一直隐藏/删除活动状态）

- lorem monkey

Answer 1

这里是一个我认为相当不知名的事件现象。你可以在这里阅读更多相关内容。

编辑：

具体来说，之所以简单的 .removeClass 无法起作用，是因为有多个监听器在监听同一个事件。所以当 click 事件被触发时，普通的 .removeClass 会移除类，但 Twitter Bootstrap 处理程序会再次添加它！为了防止其他处理程序在你的处理程序之后被执行，可以使用 e.stopPropagation。然而，这并不能阻止附加到与你的元素相同的元素上的处理程序，它只能停止树中更高处的处理程序。要完全确保在你的处理程序之后没有其他处理程序被执行，可以使用event.stopImmediatePropagation()。

- Lucas van Egeraat

---

太好了 - 非常感谢！我尝试过使用event.preventDefault()，但没有起作用。event.stopImmediatePropagation()按预期工作。我更新了jsFiddle以缩小范围：http://jsfiddle.net/jpxWj/2/再次感谢你的提示和帮助！ - lorem monkey

没问题，我添加了一些澄清，想着可能会有所帮助。 - Lucas van Egeraat

嘿，它不起作用了 - 可能是因为它在Bootstrap 3中不起作用？ - Dejell

@Dejell，我不得不结合e.preventDefault();和e.stopImmediatePropagation();才能在Bootstrap 3中正常工作，如下所述。 - ryentzer

Answer 2

Bootstrap 3 更新：

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

- Broshi

---

在我的情况下，添加 e.stopImmediatePropagation(); 能够解决问题。 - ryentzer