Reverting Bootstrap Button Group Click

Question

I've got a bootstrap button group on my form, working as radio buttons. If the user selects one of the options (in this case "Single Day"), I need to do some validation on the rest of the form. If the validation fails, I need to "unclick" Single Day - basically undo the radio button selection so that "Multi Day" is still visually selected.

I've created a simple fiddle example w/ the three solutions I've tried: http://jsfiddle.net/u5Ab4/

Solution 1 - Since it's a button group, I thought I might be able to toggle the group to change the selection

Solution 2 - Since the group toggle didn't work, maybe I need to toggle the individual buttons?

Solution 3 - Toggling is a bust, what about manually adding/removing the active class?

JSFiddle Code

HTML:

<div id="session_type" class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn">Single Day</button>
    <button type="button" class="btn active">Multi Day</button>
</div>

JS:

$('#session_type > button.btn').on("click", function () {
    //attempt 1 - since it's a radio button-style button group, i thought i could toggle the whole group (ie switch which button was selected)
    $('#session_type').button("toggle");

    //attempt 2 - toggle the button that was clicked (ie. single day) to unselect it (might need to toggle the other button as well, to select it instead, but this doesnt work at all)
    //$(this).button("toggle");

    //manually add/remove the active class from each button (again, would probably need to add the class to the other button as well, but it doesnt work)
    //$(this).removeClass("active");
});

shimmoril shimmoril · Accepted Answer · 2014-03-20T20:48:00

I figured it out with some help from my co-workers. My example was very simplified, so what I ended up doing was toggling the button group (solution 1) and adding a return false; to the relevant if statement.

Reverting Bootstrap Button Group Click

1 Answers