Question

143

Twitter Bootstrap: Remove/Toggle the active state of checkbox-like button group

rated 0 times [ 148] [ 5] / answers: 1 / hits: 18202 / 12 Years ago, fri, july 20, 2012, 12:00:00

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckenna

Add To Favorites

Follow

Total Points: 445

Total Questions: 109

Total Answers: 109

Location: Virgin Islands (U.S.)

Member since Sun, May 16, 2021

3 Years ago

mckenna questions

1 Laravel Livewire: Component in Foreach loop. Button Click shows on all items instead of Single item

Mon, Sep 6, 21, 00:00, 3 Years ago

1 Jest mock aws-sdk ReferenceError: Cannot access before initialization

Sat, Apr 11, 20, 00:00, 4 Years ago

1 Nest js POST Request Not Recognizing DTO method

Fri, Mar 20, 20, 00:00, 4 Years ago

1 How to use prop inside another prop as default value in vuejs

Thu, Mar 28, 19, 00:00, 5 Years ago

1 Javascript: Bind/unbind function behavior

Tue, Nov 27, 18, 00:00, 6 Years ago

View All

answered 12 Years ago annie · Accepted Answer

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