8

我一直在尝试使用按钮组（根据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。有没有人有办法解决吗？

4

2 回答 2

11

如果您在单击 Bootstrap 按钮时使用 DOM 编辑器，您将看到在单击按钮时将一个类active添加到标签（而不是复选框输入）。

要以编程方式切换按钮，请使用.button('toggle')标签上的 Bootstrap 方法：

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

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

这将改变按钮的外观和checked其中复选框的属性。

于 2013-09-25T13:28:19.447 回答
6

在类似的情况下，对我有用的是：

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

这正是你想要的。

PS。不确定它是否是最好的，但当时它对我有用。

于 2013-09-25T13:16:41.420 回答