Bootstrap 切换不在 onclick LI 元素上工作

Question

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

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

非常感谢。

Answer 1

您没有正确导入 CSS。我已经导入了它们，现在可以使用了。您可以使用 .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>

Answer 2

在修复你的 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();
});

Bootstrap 切换不在 onclick LI 元素上工作

Bootstrap Toggle not working on onclick LI element

html

css

jquery

toggle

twitter-bootstrap