Le bouton Bootstrap btn-group est désactivé lorsque vous cliquez dessus

Question

Je travaille avec Bootstrap v3 et j'utilise la fonction de groupe de boutons pour choisir entre 3 catégories. Une de ces catégories devrait également être présélectionnée lors du chargement de la page. Cependant, chaque fois que je clique sur le bouton sélectionné, il est désactivé. Ceci est normal si je clique sur un autre bouton, mais le bouton sélectionné se désactive si je clique n'importe où à l'extérieur de celui-ci. En outre, le bouton que je préactiver avec la classe "active" reste actif indépendamment du fait que je sélectionne d'autres boutons.

Y a-t-il un moyen de faire en sorte que ces boutons se comportent comme un groupe de boutons radio qui conservent leur état même lorsque je clique loin d'eux et qu'ils perdent le focus?

Voici le code que je travaille actuellement avec:

<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> 

Edit: Heres un lien vers jsFiddle afficher mon numéro: http://jsfiddle.net/7JT6M/

Answer 1

Javascript doit être logique pour maintenir l'état.

$(".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