无法处理 Bootstrap 4 中按钮化复选框的点击事件

Question

Bootstrap 4 可以显示复选框及其标签，使其看起来像按钮。可以在这里找到文档：https://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons

在复选框和标签显示为这样的情况下（而不是按钮），处理输入元素上的点击事件就足够简单了。但是一旦添加了所需的 CSS 类和属性以将它们呈现为按钮，处理相同的事件就不是那么简单了。这里有一些代码：

<!-- The HTML -->
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox
  </label>
</div>

// The JS
jQuery('input[type=checkbox]').click(function() {
  alert('Click!');
});

这是一个不太有效的工作示例：http://codepen.io/jfvaren/pen/QdwmpV

这里的目的是显示“点击！”单击“复选框”后发出警报。如果删除了“data-toggle”属性，它可以正常工作（除了复选框仍然可见）。似乎 Bootstrap 只是在复选框元素上放弃了所有 jQuery 注册的事件侦听器，这有点粗鲁。我知道我可以改为在标签元素上监听点击事件，但这对于我正在处理的情况来说是不希望的。

知道如何解决这个问题并且仍然拥有一个开箱即用的 Bootstrap 标记吗？

Answer 1

我会把你的代码改成这样：

<div class="btn-group" data-toggle="buttons">
    <div class="btn  btn-primary">
      <div class ="col-xs-1 extra">
      <input  type="checkbox" autocomplete="off"/> 
        </div>

           <label >
           Checkbox 1
          </label>

      </div>
   </div>

注意 extra 类。看起来引导程序缩小了复选框容器，所以我将它包装到另一个带有类 extra 的 div 中，这样我就可以轻松地编辑复选框的大小，因为在 css 上编辑复选框属性更难。现在您只需将 extra 的高度设置为某个值并将 jquery 选择器更改为 ".extra"。

---

也不需要标签来包裹复选框。我认为使用 div 包装内容并设置 css 属性并将标签仅用于文本是一个更好的主意。我就是这么做的。