Twitter Bootstrap获取复选框按钮组的状态

Question

有几个问题与Twitter Bootstrap的按钮收音机/复选框组相关,但似乎都没有新的Bootstrap约定(我正在使用v3.3.4)或我的问题.

旧的约定是声明一个<div class="btn-group">包围了许多<button>的,并且周围的div也有一个data-toggle属性buttons-checkbox或buttons-radio看起来像这样:

<div class="btn-group" data-toggle="buttons-checkbox">
    <button type="button" class="btn btn-primary">Btn 1</button>
    <button type="button" class="btn btn-primary">Btn 2</button>
    <button type="button" class="btn btn-primary">Btn 3</button>
</div>

但是,创建这些类的组的约定已经改变,可以在按钮的Bootstrap Javascript页面上看到(http://getbootstrap.com/javascript/#buttons-checkbox-radio):

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

正如您所看到的,按钮现在实际上是具有类型的子输入字段的标签,checkbox或者radio被设计为看起来像按钮的标签.

我想设置一个.on('click')事件来捕获刚刚被点击的按钮的状态,但是后面的逻辑是奇怪的倒退(并且Javascript的实现似乎是不完整的,至少在我看来 - 解释如下) .说,我想为第二个标签/复选框/按钮设置一个监听器,并确定标签/复选框/按钮是否处于活动状态/已检查 - 我将设置以下代码:

$('#label2').on('click', function(){
  console.log($(this).hasClass('active'));
});

当按下按钮以"激活"标签/复选框/按钮时,我希望上面的代码能够打印true到控制台.它打印错误.这是因为.on('click')监听器在按钮状态改变之前被触发,因此我必须根据按钮状态反转我想要采取的任何动作的逻辑.似乎倒退到我身边.(jsFiddle插图:http://jsfiddle.net/mmuelle4/qq816po7/)

还有一些其他库可以捕获这种"明智"的方式,例如Bootstrap Switch库(http://www.bootstrap-switch.org/).Bootstrap Switch库有一个switchChanged事件,在单击后捕获交换机更改,但提供按钮/复选框后点击状态.

我以为我通过注册.on('change')处理程序而不是.on('click')处理程序找到了解决方案,但我得到了相同的结果.

此外,如果<label>单击,嵌套<checkbox>永远不会设置/取消设置checked属性 - 来自Bootstrap!如果状态是惰性的,为什么甚至使用复选框？看起来像一个非常明显的不一致的情况,其中<label>可以有一个类active但<checkbox>没有checked属性集...(这是我之前的意思,当我说这个Javascript实现似乎不完整)

现在,我只需要在我的处理程序中反转逻辑,但它只是让我烦恼.总的来说,我想我的问题是有没有人经历过这个并找到一个更好的解决方案(仍然只是利用jQuery和Bootstrap,没有替代库),不需要倒置逻辑？

编辑:下面有一个解决方案,但我对<checkbox>没有checked属性的评论产生了一个略有不同的问题/讨论.可以.is(':checked')对嵌套执行查询<checkbox>以在.on('change')处理程序中获取正确的状态,但是如果检查DOM,则该属性永远不会在该实例上设置<checkbox>.令我困扰的是DOM没有反映我将通过.is(':checked')查询收到的状态......

编辑2:我发现的另一个奇怪的怪癖是,随着使用<button>'s作为收音机或复选框按钮组,必须采取不同的措施来检索和更改"虚假"按钮的某些属性.在我的情况下,我想根据各种用户输入禁用/启用按钮,但设置disabled复选框的属性不起作用:

$('input').prop('disabled', true) //Doesn't render the button disabled

这是因为按钮现在实际上<input>包含在一个被设置<label>为按钮的样式中,所以现在disabled必须在按钮上设置<label>.这有点令人沮丧,但对jQuery的.parent()方法并不太难(因为我存储了一个指向输入的指针).什么是令人沮丧的是,在一个按钮的情况下,我可以用这一事实.prop('disabled', true/false)的方法来改变disabled性质,但因为现在它是一个我不能这样做 <label>.

这在jQuery的attr文档(http://api.jquery.com/attr/)中描述,"要检索和更改DOM属性,例如表单元素的选中,选中或禁用状态,请使用.prop()方法. " A <button>显然是一种形式元素,而a <label>则不是(尽管我认为它会是).现在,在我的代码中,我必须有意识地记住.prop('disabled', true/false)用于真正的按钮和.attr('disabled', true/false)虚拟按钮.我想看看Bootstrap推断偏离常规按钮的原因......(也许这样的事情.is(':checked')可以起作用,但肯定会引起其他一些麻烦......)

EDIT3:刚刚获悉,继使用的"新公约" <input>的内包裹<label>的是不是必需的.你仍然可以使用一个按钮,预期的收音机/复选框行为将会发生...这么多让人头疼.你为什么不炫耀这两个选项,Bootstrap ???

Answer 1

引导带已经负责触发转换的原始元素上的事件.所以你不必担心检查课程.

您所要做的就是为原始输入设置事件并检查原始输入的状态

$('label > input[type=checkbox]').on('change', function () {
    console.log($(this).is(':checked'));
});

演示:http://jsfiddle.net/qq816po7/1/