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 css
s. 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
Post a Comment