javascript - 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 没有反射(reflect)我将收到的状态 .is(':checked')询问...

编辑2 :我发现的另一个奇怪的怪癖是，随着使用 <button> 的离开对于单选按钮或复选框按钮组，必须采取不同的措施来检索和更改“假”按钮的某些属性。就我而言，我想根据各种用户输入禁用/启用按钮，但设置 disabled复选框的属性不起作用:

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

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

这在 jQuery 的 attr 中有描述文档 ( http://api.jquery.com/attr/ )，“要检索和更改 DOM 属性，例如 表单元素 的选中、选中或禁用状态，请使用 .prop() 方法。”一个 <button>显然是一个表单元素，而 <label>不是(虽然我认为会是)。现在，在我的代码中，我必须有意识地记住使用 .prop('disabled', true/false)对于真正的按钮，和 .attr('disabled', true/false)用于人造按钮。我想看看 Bootstrap 与常规按钮不同的原因......(也许是这样的东西 .is(':checked') 可以工作，但它肯定会引起其他一些头痛......)

编辑3 :刚刚了解到遵循使用 <input> 的“新约定”包裹在 <label> 内是 不需要 .您仍然可以使用按钮，并且会出现预期的单选框/复选框行为......如此令人头疼。你为什么不炫耀这两个选项，Bootstrap？？？

Answer 1

引导带已经负责在被转换的原始元素上触发事件。所以你不必担心检查类(class)。

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

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

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