Twitter Bootstrap: Remove/Toggle the active state

Question

With twitters Bootstrap I've created a button group with radiobox behaviour to let the user choose between the different states. This works out of the box as supposed.

I arranged a jsFiddle with the example here: http://jsfiddle.net/jpxWj/

What I tried (and want) is that the pressed state can be removed when I click the active button second time.

I tried with jQuerys removeClass() to remove the active class from the btn classes but it won't work. (I also tried removing with .on() but this just keeps the active always hidden/removed)

Answer 1

Here you go, quite an unknown event phenomenon, in my opinion. You can read more about it here.

Edit:

To ellaborate, the reason why a simple .removeClass doesn't work, is because there are multiple listeners, listening to the same event. So when the click event is fired, a normal .removeClass would remove the class, but then the Twitter Bootstrap handler would add it again! To prevent any other handlers from being executed after yours, you can do e.stopPropagation. However, this does not stop the handlers attached to the same element as yours, it only stops the ones further up the tree. To completely make sure no other handlers are executed after yours, you can use event.stopImmediatePropagation().

Answer 2

Bootstrap 3 Update:

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