基于复选框状态的表单输入字段必填性校验问题

问题分析与修复方案 #

核心问题 #

1. 选择器不匹配：HTML中复选框的ID是DataOfficer_ind，但JS里全程用#ind选择器，导致事件绑定、属性修改完全失效——这就是取消勾选后输入框仍必填的根本原因。
2. 初始状态逻辑错误：页面加载时默认把三个输入框设为必填，违背了"默认非必填"的需求。
3. 复选框必填逻辑错误：需求明确复选框是必填项，但你在取消勾选时把它的required设为false，不符合要求。

修复步骤 #

1. 统一复选框的ID：将HTML中复选框的ID改为ind，和label的for属性、JS选择器保持一致。
2. 修正初始状态：页面加载时仅将复选框设为必填，三个输入框保持非必填。
3. 调整复选框的必填逻辑：无论勾选与否，复选框始终为必填项（因为必须选择yes/no）。
4. 确保取消勾选时，清空输入框并移除它们的必填属性。

修复后完整代码 #

JavaScript

// 页面加载完成后执行
$(function() {
  // 初始状态：复选框必填，输入框非必填
  $("#ind").prop("required", true);
  $("#first, #second, #third").prop("required", false);

  $("#ind").on('change', function() {
    const isChecked = $(this).is(':checked');
    $("#hidInd").val(isChecked ? "Y" : "N");

    if (isChecked) {
      // 勾选时，设置输入框为必填
      $("#first, #second, #third").prop("required", true);
    } else {
      // 取消勾选时，清空输入框并移除必填属性
      $("#first, #second, #third").val("").prop("required", false);
    }
    // 复选框始终保持必填
    $("#ind").prop("required", true);
  });
});

HTML

<!-- jQuery 3.3.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Body -->
<form class="needs-validation" novalidate>
  <div class="col-md-12 mb-3">
    <label for="ind" class="form-label">Please choose yes or no <i class="fa-solid fa-star-of-life required-field fa-xs"></i></label>
    <div>
      <input type="hidden" id="hidInd" name="hidInd" value="" />
      <div class="d-inline-block mt-1 me-1">No</div>
      <div class="form-check form-switch d-inline-block form-switch-md">
        <input type="checkbox" class="form-check-input" id="ind" style="cursor: pointer;">
        <label for="ind" class="form-check-label mt-1 ms-1">Yes</label>
      </div>
    </div>
    <div class="valid-feedback">Correct!</div>
    <div class="invalid-feedback">
      Please check the switch
    </div>
  </div>
  <h6>Please enter 3 username:</h6>
  <div class="col-md-12 mb-3">
    <label for="first" class="form-label">First Choice </label>
    <input type="text" class="form-control" id="first">
    <div class="valid-feedback">Correct!</div>
    <div class="invalid-feedback">Please fill in the first choice.</div>
    
    <label for="second" class="form-label">Second Choice </label>
    <input type="text" class="form-control" id="second">
    <div class="valid-feedback">Correct!</div>
    <div class="invalid-feedback">Please fill in the second choice.</div>
    
    <label for="third" class="form-label">Third Choice </label>
    <input type="text" class="form-control" id="third">
    <div class="valid-feedback">Correct!</div>
    <div class="invalid-feedback">Please fill in the last choice.</div>
  </div>
</form>

补充说明 #

• 修复后，页面加载时仅复选框为必填，三个输入框默认非必填。
• 勾选复选框（Yes）时，三个输入框自动变为必填；取消勾选（No）时，输入框清空并恢复非必填状态。
• 复选框始终保持必填，确保用户必须做出选择。

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