Somename Somename - 3 months ago 34
CSS Question

Bootstrap Toggle not working on onclick LI element

I'm using the bootstraptoggle from http://www.bootstraptoggle.com/ to convert checkboxes into toggles. I have included their cdn for the script and the css.

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

On the

<li>one</li>
I have called the toggle function by
<input type="checkbox" data-toggle="toggle" />
but for some reason its not showing in the filldle. It works locally though. So what I want to achieve is to be able to check/uncheck the checkboxes on clicking the
<li>
or the checkbox itself. I'm able to achieve that for normal checkboxes with the script in the fiddle. How can I apply it to the toggled checkboxes too? The toggled class checkboxes should also be checked/unchecked on the corresponding
<li>
click.

Many thanks.

Answer

You were not properly importing the CSSs. I've imported them and now it's working. You can manually toggle the switch using .bootstrapToggle('toggle') method(from official page).

$('.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>

Comments