代碼以設置/取消按鈕，複選框在自舉3.0

Question

我已經試圖用一個按鈕組（按照指令的在http://getbootstrap.com/javascript/#buttons），然後到它們的值解析到移位陣列：

爲代碼的BTN-組

<div class="btn-group" id="weekdays" data-toggle="buttons"> 
    <label class="btn btn-default"> 
     <input type="checkbox" >Mo 
    </label> 
    <label class="btn btn-default"> 
     <input type="checkbox">Tu 
    </label> 
    <label class="btn btn-default"> 
     <input type="checkbox">We 
    </label> 
    </div> 
</div> 

代碼用於讀取值

$("#weekdays ").change(function(event){ 

    var checkedDays = $("#weekdays :checkbox").map(function(){ 
     return $(this).is(':checked') ? 1 : 0; 
    }).get(); // <---- 

    var sun = checkedDays.pop(); 

    checkedDays.unshift(sun); 

    console.log(checkedDays); 
}); 

目前爲止這麼好。 （即使我敢肯定，代碼可以更好的寫法。）

不過，我的問題是當我嘗試編程設定的複選框的的值，並把它體現在UI。我已經設法改變複選框的值使用多種方法$(this).prop('checked', true)等，這似乎更新後備值，但它沒有做任何改變按鈕的外觀。

我見過很多解決方案，但都沒有與Bootstrap 3.0建議的方式設置複選框btn-group。有沒有人有辦法解決嗎？

Answer 1

如果您在單擊引導按鈕時使用DOM編輯器，則會在點擊該按鈕時看到類active被添加到標籤（而不是複選框輸入）。

以編程切換的按鈕，可以使用自舉方法.button('toggle')標籤上：

$('#weekdays label').eq(n).button('toggle'); 

http://jsfiddle.net/mblase75/4NVvj/

這將改變按鈕的外觀和內複選框的checked屬性。

Answer 2

在類似的情況下，什麼工作對我來說是這樣的：

$('#checkBoxId').trigger("click"); 

正是你想要哪個呢。

PS。不知道它是否是最好的，但當時它對我有用。