Почему мой bootstrap -переключатель не работает?

Question

У меня есть этот код:

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">

Но кажется, что условие if ($(slotData).bootstrapSwitch('state')) всегда истинно, тогда как это не так. Я не знаю почему.

Answer 1

Я предполагаю, что для захвата изменений вы должны использовать событие switchChange. Таким образом, слегка измененный js будет выглядеть так:

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

И результат: https://jsfiddle.net/scarabs/4k92sfuL/9/