Question

有几个问题与Twitter Bootstrap的按钮收音机/复选框组有关，但似乎没有一个新的Bootstrap约定（我正在使用v3.3.4）或我的问题解决。

旧约定是声明一个<div class="btn-group">围绕着一些<button>，而周围的div也有一个data-toggle属性buttons-checkbox或{ {1}}看起来像这样：

buttons-radio

但是，创建这些类的组的约定已经改变，可以在Bootstrap Javascript页面上看到按钮（http://getbootstrap.com/javascript/#buttons-checkbox-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>

正如您所看到的，按钮现在实际上是带有<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事件来捕获刚刚单击的按钮的状态，但是后面的逻辑奇怪地向后（并且Javascript的实现似乎是不完整的，至少在我的眼睛 - 要遵循的解释。说，我想为第二个标签/复选框/按钮设置一个监听器，并确定标签/复选框/按钮是否处于活动状态/已检查 - 我将设置以下代码：

.on('click')

我希望上面的代码在按下按钮以“激活”标签/复选框/按钮时，将$('#label2').on('click', function(){ console.log($(this).hasClass('active')); });打印到控制台。 它打印错误。这是因为true侦听器在按钮状态更改之前被触发，因此我必须根据按钮反转我想要采取的任何操作的逻辑州。似乎倒退到我身边。（jsFiddle插图：http://jsfiddle.net/mmuelle4/qq816po7/）

还有一些其他库可以捕获这种“合理”方式，例如Bootstrap Switch库（http://www.bootstrap-switch.org/）。 Bootstrap Switch库有一个.on('click')事件，可在单击后捕获开关更改，但提供按钮/复选框单击后的状态。

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

此外，如果单击.on('click')，嵌套的<label>永远不会设置/取消设置<checkbox>属性 - 来自Bootstrap！如果状态是惰性的，为什么甚至使用复选框？似乎是一个非常明显的不一致的情况，checked可以有<label>类，但active没有设置<checkbox>属性...（这就是我早在我说Javascript实现这个看似不完整的时候就意味着

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

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

EDIT2 ：我发现的另一个奇怪的怪癖是，由于使用<checkbox>为无线电或复选框按钮组，必须采取不同的措施来检索和改变“仿”按钮的一些属性。在我的情况下，我想根据各种用户输入禁用/启用按钮，但设置复选框的.is(':checked')属性不起作用：

<button>

这是因为按钮现在实际上是disabled中包含的$('input').prop('disabled', true) //Doesn't render the button disabled，其设置为按钮，因此现在必须在<input>上设置<label>。这有点令人沮丧，但使用jQuery的disabled方法并不太难（因为我存储了一个指向输入的指针）。令人沮丧的是，在按钮的情况下，我可以使用<label>方法更改.parent()属性，但是我不能这样做同样因为现在它是 .prop('disabled', true/false)。

jQuery的disabled文档（http://api.jquery.com/attr/），“要检索和更改DOM属性，例如表单元素的已选中，已选中或已禁用状态，使用.prop（）方法。“ <label>显然是一个表单元素，而attr则不是（虽然我认为会是这样）。现在，在我的代码中，我必须有意识地记住使用<button>作为真正的按钮，<label>作为虚拟按钮。我想看看Bootstrap推断偏离常规按钮的原因......（也许是因为像.prop('disabled', true/false)这样的东西可以起作用，但肯定会让其他一些麻烦......）

EDIT3 ：刚刚了解到遵循.attr('disabled', true/false)包含在.is(':checked')中的“新惯例”是不需要。你仍然可以使用一个按钮，并且会发生预期的无线电/复选框行为...这么多让人头疼。你为什么不展示这两个选项，Bootstrap ???

Answer 1

Boot strap已经负责触发转换的原始元素上的事件。所以你不必担心检查课程。

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

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

DEMO ：http://jsfiddle.net/qq816po7/1/

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

1 个答案: