jquery - Bootstrap Toggle not working on onclick LI element -


i'm using bootstraptoggle http://www.bootstraptoggle.com/ convert checkboxes toggles. have included cdn script , css.

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

on <li>one</li> have called toggle function <input type="checkbox" data-toggle="toggle" /> reason not showing in filldle. works locally though. want achieve able check/uncheck checkboxes on clicking <li> or checkbox itself. i'm able achieve normal checkboxes script in fiddle. how can apply toggled checkboxes too? toggled class checkboxes should checked/unchecked on corresponding <li> click.

many thanks.

you not importing csss. i've imported them , it's working. can manually toggle 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

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -