AJAX请求成功后自动将Bootstrap开关复选框设为关闭状态

在员工页面的HTML表单中使用Bootstrap开关复选框控制密码修改字段的显示/隐藏：勾选显示字段，取消勾选隐藏字段。需求是AJAX更新员工记录返回SUCCESS时，将开关设为关闭状态，提示用户保存完成。

编写的AJAX代码未生效（AJAX本身正常，数据库值已更新）：

var formData = $("#employeeForm").serialize();

$.ajax({
  type: "POST",
  url: "/Employee/SaveEmployee",
  data: formData,
  success: function(result) {
    $("#PasswordChange").prop("checked", false);
    $("#PasswordChange").click();
    // 处理AJAX返回结果
    // 比如显示成功提示或者跳转页面
  },
  error: function(xhr, ajaxOptions, thrownError) {
    // 错误处理
  }
});

相关前端代码示例：

JavaScript #

$('#PasswordChange').change(function() {
  if (this.checked) {
    $(this).val(true);
    $("#hiddenFields").show();
  } else {
    $(this).val(false);
    $("#hiddenFields").hide();
  }
});

// 模拟AJAX回调
setTimeout(() => {
  console.log('now');
  $("#PasswordChange").prop("checked", false);
  $("#PasswordChange").click();
}, 3000);

HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <p>三秒内切换复选框测试。</p>

  <div class="form-group row">
    <div class="form-check form-switch col-4 align-with-label">
      <input class="form-check-input" type="checkbox" value="false" id="PasswordChange" name="PasswordChange">
      <label class="form-check-label" for="PasswordChange">修改密码</label>
    </div>
  </div>

  <!-- 密码修改隐藏区域 -->
  <div class="form-group row" id="hiddenFields" style="display: none;">
    <div class="col-md-10 offset-md-1">
      <div class="row justify-content-start">
        <div class="col-4">
          <label>原密码</label>
        </div>
        <div class="col-4">
          <label>新密码</label>
        </div>
        <div class="col-4">
          <label>确认新密码</label>
        </div>
      </div>
      <div class="row justify-content-start">
        <div class="col-4">
          <input type="text" id="Password" name="Password" class="form-control" value="">
        </div>
        <div class="col-4">
          <input type="text" id="NPassword1" name="NPassword1" class="form-control" value="">
        </div>
        <div class="col-4">
          <input type="text" id="NPassword2" name="NPassword2" class="form-control" value="">
        </div>
      </div>
    </div>
  </div>

  <div class="row offset-md-3">
    <div class="col-4">
      <button class="button button-sel" id="savebutton" name="savebutton" type="submit">保存</button>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

方法一：触发change事件同步状态 #

修改AJAX的success回调，设置checked为false后手动触发change事件，自动执行已绑定的状态更新逻辑：

success: function(result) {
  $("#PasswordChange").prop("checked", false).trigger("change");
  // 其他后续处理，比如显示成功提示
}

方法二：直接手动更新所有状态 #

如果不想依赖change事件，可直接同步开关属性、值和隐藏区域的显示状态：

success: function(result) {
  const $toggle = $("#PasswordChange");
  $toggle.prop("checked", false);
  $toggle.val(false);
  $("#hiddenFields").hide();
  // 其他后续处理
}

原代码失效原因 #

• 设置checked为false后调用click()，会再次切换开关状态（变回true），导致操作抵消。
• Bootstrap开关基于原生复选框样式增强，直接设置checked即可更新UI，但需要同步关联的val值和隐藏区域状态，触发change事件是最简洁的同步方式。

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