當點擊離開時，Bootstrap btn-group按鈕停用

Question

我正在使用Bootstrap v3，我使用按鈕組功能作爲在3個類別之間進行選擇的方式。其中一個類別也應在頁面加載時預選。但是，每當我從所選按鈕上單擊時，它都將被禁用。

這是正常的，如果我點擊另一個按鈕，但選定的按鈕停用，如果我點擊它的任何地方。另外，無論我是否選擇其他按鈕，使用「活動」類預先激活的按鈕仍保持活動狀態。

有沒有辦法讓這些按鈕的行爲像一組單選按鈕，即使當我點擊離開它們並失去焦點時，它們也會保持它們的狀態？

這裏是我目前正在使用的代碼：

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

編輯：下面有一個鏈接到的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