Toggle is not binded to checkbox value nor checked property

[milmih]

Note

Possible duplicate of #111.

Problem

If you open http://www.bootstraptoggle.com/, fire up devtools console and run (checkbox is on, toggle is on):

>  $('.example input:first').prop('checked')
<- true
>  $('.example input:first').prop('checked', false)
<- [input]
>  $('.example input:first').prop('checked')
<- false

or:

>  $('.example input:first').val()
<- "on"
>  $('.example input:first').val('off')
<- [input]
>  $('.example input:first').val()
<- "off"

toggle doesn't get updated.

Also, toggle first changes it state upon click and then onChange event on checkbox input is invoked.

Proposed solution

1. Bind the state of toggle to the state of checkbox.
2. Do not assume that state will be changed (since it can be prevented in onChange event handler or in other ways). Update the toggle state upon checkbox state has been updated.

[stosh15x]

This is my solution

$("input:checkbox").on('change', function(){
  var isChecked = $(this).is(':checked')
  $(this).val(Number(isChecked)).attr('checked', isChecked)
});