bootstrap-switch使用教程：解决常规复选框状态设置不生效问题

问题描述 #

我在论坛查阅了大量处理复选框的相关内容，尝试了如下方案但均未生效：

$('#id_1').prop('checked',true);
$('#id_1').prop('checked',false);

$('#id_1').attr('checked', 'checked');
$('#id_1').removeAttr('checked');

document.getElementById('id_1').checked = true;
document.getElementById('id_1').checked = false;

document.getElementById('id_1').setAttribute('checked', 'checked');
document.getElementById('id_1').removeAttribute('checked');

我猜测需要重载该元素，如果确实如此，如何通过id单独重载对应元素？
对应HTML代码如下：

<input type="checkbox" id="id_1" class="bootstrap-switch" data-on-label="ON" data-off-label="OFF" checked="checked">

原因说明 #

你使用的是bootstrap-switch封装组件，直接操作原生DOM的属性/属性值只会修改底层input的状态，不会同步触发组件的视图渲染更新，因此看不到开关状态变化，无需重载元素，调用组件官方暴露的API操作即可。

解决方案 #

具体实现方法如下：

1. 初始化bootstrap-switch组件

$("[name='my-checkbox']").bootstrapSwitch();

2. 按ID修改指定开关的状态

// 第二个参数传true为开启，false为关闭
$('#id_1').bootstrapSwitch('state', true);

3. 监听开关状态变更事件（Bernhard提供方案）

$("[name='my-checkbox']").on('switchChange.bootstrapSwitch', function(event, state) {
  console.log(event.target.checked);
  $(this).attr('data-switch-value', event.target.checked);
});

内容的提问来源于stack exchange，提问作者Harald。