Twitter Bootstrap: Remove/toggle The Active State Of Checkbox-like Button Group

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

Solution 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().

Solution 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');
    });