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

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

旧的约定是声明< div class =“btn-group”>它包围了许多< button>,周围的div还具有按钮复选框或按钮 – 收音机的数据切换属性,如下所示：

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

您可以看到,按钮现在实际上是带有类型为复选框或无线电的子输入字段的标签,其样式看起来像按钮.

我想设置一个捕获刚刚点击的按钮的状态的.on(‘click’)事件,但是跟随的逻辑是奇怪的(并且Javascript的实现看起来不完整,至少在我的眼睛 – 解释如下).说,我想为第二个标签/复选框/按钮设置一个监听器,并确定标签/复选框/按钮是否被激活/检查 – 我设置了以下代码：

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

我希望上面的代码,当按钮被按下来“激活”标签/复选框/按钮时,打印真实的控制台.它打印错误.这是因为.on(‘click’)监听器在按钮状态更改之前被触发,因此我将不得不根据按钮状态反转我想要采取的任何动作的逻辑.似乎向我回来(jsfiddle图：http://jsfiddle.net/mmuelle4/qq816po7/)

还有一些其他的库可以抓住这个“敏感”的方式,比如Bootstrap Switch库(http://www.bootstrap-switch.org/). Bootstrap交换机库具有switchChanged事件,该事件在点击后捕获交换机更改,但提供按钮/复选框的状态.

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

另外,如果< label>被点击,嵌套的< checkBox>从不设置/取消选中检查的属性 – c’n Bootstrap！为什么甚至使用复选框,如果状态是惰性的？似乎是一个很明显的不一致的情况,其中< label>可以有一个活动类,但是< checkBox>没有检查的属性集…(这是我以前的意思,当我说这个Javascript的实现看起来不完整)

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

编辑：下面有一个解决方案,但是关于< checkBox>没有检查属性已经产生了一个略有不同的问题/讨论.可以对嵌套的< checkBox>执行.is(‘：checked’)查询.要在.on(‘change’)处理程序中获取正确的状态,但是如果您检查DOM,则该属性从未实际设置在< checkBox&gt.上.它让我感到DOM不会反映我将使用.is('：checked')查询的状态 EDIT2：我发现另一个奇怪的是,随着使用< button>的无线电或复选框按钮组,不得不采取不同的措施检索和更改“人造”按钮的某些属性.在我的情况下,我想根据各种用户输入来禁用/启用按钮,但设置复选框的禁用属性不起作用：

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

这是因为按钮现在实际上是< input>包含在< label>内它被称为按钮,因此现在已禁用,必须在< label>上设置.这是一个有点令人沮丧,但不是很难与jQuery的.parent()方法(因为我存储一个指针的输入).令人沮丧的事实是,在按钮的情况下,我可以使用.prop(‘disabled’,true / false)方法来更改disabled属性,但是我不能这样做,因为现在它是一个<标签&gt ;. 这在jQuery的attr文档(http://api.jquery.com/attr/)中有所描述,“要检索和更改DOM属性,例如表单元素的checked,selected或disabled状态,请使用.prop()方法. A<按钮>显然是一个表单元素,而< label>不是(虽然我会认为是)现在,在我的代码中,我必须有意识地使用.prop(‘disabled’,true / false)为真实按钮,而.attr(‘disabled’,true / false)用于人造按钮.我希望看到Bootstrap的理由是从常规按钮退出…(也许这样的事情就像.is(‘：checked’)可以正常工作,但这确实会使一些其他头痛…)

EDIT3：刚刚了解到,使用< label>之类的< input>‘包含在< label>之内的“新惯例”不是必需的.你仍然可以使用一个按钮,预期的收音机/复选框的行为会发生…这么多的头痛没有什么.为什么你不会炫耀两个选项,Bootstrap ???

解决方法

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

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

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

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

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

解决方法

相关文章