Bootstrap btn-group button deactivates when clicked

Question

I work with Bootstrap v3, and I use the button group function as a means of choosing between the three categories. One of these categories must also be pre-selected when loading the page. However, whenever I press a button from a selected button, it is deactivated.

This is normal if I press another button, but the selected button is deactivated if I press it somewhere outside of it. In addition, the button that I preactivate with the “active” class remains active, regardless of whether I select other buttons.

Is there a way to make these buttons behave like a group of radio buttons that will keep their state even when I click on them and they lose focus?

Here is the code I'm working with now:

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default active"><span class="goods">Good</span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="services">Service</span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="spaces">Space</span></button>
    </div>
</div>

: Heres jsfiddle, : http://jsfiddle.net/7JT6M/

Answer 1

javascript .

$(".type").click(function(){
   $(".type").removeClass("active");
   $(this).addClass("active");
});

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default type active"><span class="goods">Good</span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default type"><span class="services">Service</span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default type"><span class="spaces">Space</span></button>
    </div>
</div>

DEMO