所有开关勾选后Bootstrap Toggle按钮无法启用，求助解决方案

当勾选所有带required类的开关复选框后，普通Submit按钮可正常启用，但Bootstrap Toggle按钮始终处于禁用状态，无法正常触发启用逻辑。

问题原因 #

Bootstrap Toggle组件会将原始的<input type="checkbox">元素隐藏，生成自定义的按钮DOM结构。直接通过jQuery修改原始input的disabled属性，无法同步到组件渲染后的UI状态，必须调用组件提供的API来控制启用/禁用。另外，原始代码中多个复选框重复使用同一个id，违反HTML规范，也需要修正。

修正后的代码 #

HTML部分（修复重复ID问题）

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@5.0.6/css/bootstrap5-toggle.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@5.0.6/js/bootstrap5-toggle.ecmas.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</head>
<div class="container">
  <form action="#">
    <div class="container">
      <div class="form-check form-switch">
        <input class="form-check-input filled-in box required" type="checkbox" role="switch" id="flexSwitchCheckGmail">
        <label class="form-check-label" for="flexSwitchCheckGmail">Gmail</label>
      </div>
      <div class="form-check form-switch">
        <input class="form-check-input filled-in box required" type="checkbox" role="switch" id="flexSwitchCheckPika">
        <label class="form-check-label" for="flexSwitchCheckPika">Pika</label>
      </div>
      <div class="form-check form-switch">
        <input class="form-check-input filled-in box required" type="checkbox" role="switch" id="flexSwitchCheckJustice">
        <label class="form-check-label" for="flexSwitchCheckJustice">Justice</label>
      </div>
      <!-- 普通Submit按钮 -->
      <div class="form-check form-switch">
        <button type="button" class="toggle-disabled" disabled>Submit</button>
      </div>
    </div><br>
    <!-- Bootstrap Toggle按钮 -->
    <input type="checkbox" class="toggle-disabled" data-toggle="toggle" data-size="small" data-onlabel="Done" data-offlabel="Pending" data-onstyle="success" data-offstyle="warning" disabled>
  </form>
</div>

JavaScript部分（改用Toggle组件API控制状态）

$(document).on("change", ".required", function(e) {
  // 计算未勾选的必填复选框数量
  const uncheckedCount = $(".required:not(:checked)").length;
  
  // 控制普通按钮
  $(".toggle-disabled:button").prop("disabled", uncheckedCount > 0);
  
  // 控制Bootstrap Toggle组件
  if (uncheckedCount > 0) {
    $(".toggle-disabled[type='checkbox']").toggle('disable');
  } else {
    $(".toggle-disabled[type='checkbox']").toggle('enable');
  }
});

效果说明 #

• 修复重复ID后，页面HTML结构符合规范，避免潜在的交互问题。
• 通过toggle('disable')和toggle('enable')方法直接控制Bootstrap Toggle组件的状态，确保UI和功能同步。
• 简化了未勾选数量的计算逻辑，使用:not(:checked)选择器直接获取未勾选的必填复选框，代码更简洁。

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