Why does my bootstrap-switch does not work?

Question

I have this code :

 jQuery.each($('.onoffswitch-checkbox'), function(i, slotData) { console.log($(slotData).bootstrapSwitch('state')) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.js" integrity="sha256-+VCjCLUkzOOnKtJ0s04D3mcyypeENTag5Xivs9hQVKs=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.css" integrity="sha256-KPed1fTS6lgv8BuFBwJHqgVH+CwXBGtR5aGOVr7UQWA=" crossorigin="anonymous" /> <input class="onoffswitch-checkbox" type="checkbox" data-state="true" checked="" data- size="small" data-on-text="ON" data-off-text="OFF" data-on-color="success" data-off- color="danger" id="test" data-date="07/04/20" data-dateen="2020- 04-07" data-begin="2020-04-07T13:00:00.0000Z" data-end="2020-04-07T18:00:00.0000Z" data- profile="false">

But it seems that the condition if ($(slotData).bootstrapSwitch('state')) is always True whereas it is not. I don't know why.

Answer 1

I assume to capture changes you should use switchChange event. So slightly modified js will look like this:

$('.onoffswitch-checkbox').bootstrapSwitch(); /* <-- initialize plugin */ 
$('.onoffswitch-checkbox').on('switchChange.bootstrapSwitch', function (event, state) {
console.log(state); /* <-- watch for state changes */ 
}); 

And result is: https://jsfiddle.net/scarabs/4k92sfuL/9/