如何设置Bootstrap表单需勾选复选框才可提交

下面提供两种可行的实现方式，你可以根据需求选择：

方法一：HTML原生验证（快速实现） #

直接给复选框添加required属性，浏览器会自动处理验证逻辑，阻止未勾选时的表单提交，并弹出默认提示。

修改后的完整代码：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1" required>
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
    <!-- 可选：添加自定义提示文本 -->
    <div class="invalid-feedback">请勾选此复选框</div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

说明：

• 给复选框<input>标签添加required属性即可触发原生验证
• 若需要自定义提示文本，添加invalid-feedback类的元素，可配合Bootstrap的表单验证样式使用

方法二：JavaScript自定义验证（更灵活的交互） #

如果需要更定制化的验证提示和交互效果，可以通过JavaScript监听表单提交事件，手动检查复选框状态：

完整代码示例：

<form id="myForm">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
    <div class="text-danger d-none" id="checkboxError">请勾选此复选框才能提交</div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  const checkbox = document.getElementById('exampleCheck1');
  const errorElement = document.getElementById('checkboxError');
  
  if (!checkbox.checked) {
    e.preventDefault(); // 阻止表单提交
    errorElement.classList.remove('d-none'); // 显示错误提示
    checkbox.classList.add('is-invalid'); // 给复选框添加错误样式
  } else {
    errorElement.classList.add('d-none');
    checkbox.classList.remove('is-invalid');
  }
});
</script>

说明：

• 监听表单的submit事件，在提交前检查复选框是否被勾选
• 若未勾选，阻止默认提交行为，显示自定义错误提示并添加Bootstrap的is-invalid样式标记
• 勾选后清除错误提示和样式

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