Bootstrap Toggle 不适用于 onclick LI 元素

Question

我正在使用来自http://www.bootstraptoggle.com/ 的引导切换将复选框转换为切换。我已经为脚本和 css 包含了他们的 cdn。

https://jsfiddle.net/j04x6sjm/4/

在<li>one</li> 上，我通过<input type="checkbox" data-toggle="toggle" /> 调用了切换功能，但由于某种原因，它没有显示在填充中。它虽然在本地工作。所以我想要实现的是能够在单击<li> 或复选框本身时选中/取消选中复选框。我可以使用小提琴中的脚本为普通复选框实现这一点。我怎样才能将它应用到切换的复选框呢？切换的类复选框也应在相应的<li> 点击时选中/取消选中。

非常感谢。

Answer 1

在修复你的 jquery 之前......

$('ul.list-group1 li').on('click', function() {
 var $cb = $(this).find(":checkbox");
 if (!$cb.prop("checked")) {
    $cb.prop("checked", true);
 } else {
    $cb.prop("checked", false);
 }
});

$('ul.list-group1 li input').on('click', function(event) {
   event.stopPropagation();
});

Answer 2

您没有正确导入CSSs。我已经导入了它们，现在它正在工作。您可以使用.bootstrapToggle('toggle')方法手动切换开关（来自官方页面）。

$('.list-group-item1-text').click(function() {  
    var $cb = $(this).parent().find(":checkbox");
    $cb.bootstrapToggle('toggle');
    //if (!$cb.prop("checked")) {
      //  $cb.prop("checked", true);
    //} else {
    //    $cb.prop("checked", false);
});

ul{
  list-style:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<ul class="list-group1">
  <li class="list-group-item1">
    <input type="checkbox" data-toggle="toggle" />
    <span class="list-group-item1-text" >One</span>
  </li>
  <li class="list-group-item1">
    <input type="checkbox" data-toggle="toggle" />
    <span class="list-group-item1-text">Two</span>
  </li>
  <li class="list-group-item1">
    <input type="checkbox" data-toggle="toggle" />
    <span class="list-group-item1-text">Three</span>
  </li>
  <li class="list-group-item1">
    <input type="checkbox" data-toggle="toggle" />
    <span class="list-group-item1-text">Four</span>
  </li>
  <li class="list-group-item1">
    <input type="checkbox" data-toggle="toggle" />
    <span class="list-group-item1-text">Five</span>
  </li>
</ul>