jQuery实现复选框组单选时对应输入框动态设为必填

核心需求 #

• 同组复选框实现类单选互斥效果，同一时间仅允许选中1项
• 选中第n个复选框时，仅第n个关联文本输入框设为必填项，其余未选中项对应的输入框取消必填校验
• 修正原有代码错误将required属性绑定到复选框的逻辑问题

原有代码问题 #

• 错误将required属性设置在复选框元素上，未定位到关联的文本输入框
• 初始状态给所有复选框添加required属性，会拦截互斥选中的点击操作，不符合类单选交互逻辑
• 未实现输入框必填状态的动态切换

修正后代码 #

jQuery 逻辑代码 #

$(document).ready(function() {
  // 初始化移除所有复选框的默认required属性，避免拦截点击操作
  $('.check[name="OVD"]').removeAttr('required');

  $('.check').on('click', function() {
    const $current = $(this);
    const groupName = $current.attr('name');
    const $group = $('.check[name="' + groupName + '"]');

    // 实现同组复选框互斥选中
    $group.not($current).prop('checked', false);

    // 先清空同组所有输入框的必填属性，重置校验状态
    $group.closest('.row').find('input[type="text"]').removeAttr('required');

    // 当前复选框为选中状态时，给对应行的输入框添加必填属性
    if ($current.prop('checked')) {
      $current.closest('.row').find('input[type="text"]').prop('required', true);
    }
  });
});

页面结构参考 #

<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" name="OVD" class="check form-check-input">
    <h5 class="d-inline">A. Passport Number</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" name="OVD" class="check form-check-input">
    <h5 class="d-inline">B. Voter ID Card</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" name="OVD" class="check form-check-input">
    <h5 class="d-inline">C. Driving Licence</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" name="OVD" class="check form-check-input">
    <h5 class="d-inline">D. NREGA Job Card</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" name="OVD" class="check form-check-input">
    <h5 class="d-inline">E. National Population Register Letter</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" name="OVD" class="check form-check-input">
    <h5 class="d-inline">F. Proof of Possession on Aadhaar</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>

逻辑说明 #

• 利用.closest('.row')定位当前复选框所在的行容器，再查找行内的文本输入框，精准实现复选框和对应输入框的绑定，不需要额外添加id或自定义属性做匹配
• 每次点击先重置同组所有输入框的必填状态，再根据当前复选框的选中状态给对应输入框加必填，避免旧状态残留
• 初始化移除复选框的required属性，避免浏览器默认表单校验拦截复选框的点击切换操作

规范提示 #

原有HTML中所有复选框都使用了相同的id="OVD"，不符合HTML id全局唯一的规范，建议给每个复选框设置独立id，方便后续label关联或DOM查询。

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