如何在设置Bootstrap Switch状态时阻止change事件触发？

要解决初始化设置开关状态时触发事件的问题，你可以利用bootstrapSwitch的API参数跳过事件触发，同时使用官方推荐的事件绑定方式：

核心要点 #

• 设置开关状态时，添加第三个参数true，告知插件跳过触发切换事件
• 只绑定switchChange.bootstrapSwitch事件，这是插件专为用户手动操作设计的事件

修改后的代码 #

JavaScript #

$(document).ready(function() {
  // 初始化bootstrapSwitch
  $("#IsPublish").bootstrapSwitch();
  // 设置状态时传入第三个参数true，跳过事件触发
  $("#IsPublish").bootstrapSwitch('state', true, true);
});

// 只绑定插件专属的switchChange事件，仅用户手动操作时触发
$('#IsPublish').on('switchChange.bootstrapSwitch', function(event, state) {
  $('#status').text(`开关状态变为：${state ? '开启' : '关闭'}`);
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.min.css" integrity="sha512-lANJTDwF23Xos7T5Q7SNbZ7dFxLG8YSQJ2qCGrav0Fhe5vns60+tUECZv+9udXdKiX3/YTWt++tEKyEcuZv4dQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<input type="checkbox" id="IsPublish" />
<br><br>
<label id="status"></label>

解释 #

1. 初始化时跳过事件：bootstrapSwitch('state', true, true)的第三个参数skip设为true，会阻止插件在设置状态时触发switchChange.bootstrapSwitch和原生change事件，只有用户手动点击开关时才会触发。
2. 使用专属事件：switchChange.bootstrapSwitch是bootstrapSwitch提供的原生事件，能准确捕获用户的手动操作，避免了绑定click事件可能遇到的元素结构问题（因为插件会对原始checkbox进行包装，直接绑定click到原始元素可能无效）。

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