勾选复选框后单选框未触发必填校验的问题排查

我在网页中设置了一个复选框，下方包含两个单选框和两个文本框，给这些单选框与文本框统一添加了类名OutEmploy。需求是：当勾选该复选框时，上述控件需设为必填项。我编写的jQuery代码实现了该逻辑，但目前仅文本框能正常触发必填校验，单选框未生效，恳请协助排查原因。

相关代码 #

复选框代码 #

3. <input id="employ"  asp-for="Employments.Sec3Employed" type="checkbox" />

完整表单代码 #

<form asp-action="Create">
3. <input id="employ"  asp-for="Employments.Sec3Employed" type="checkbox" />
<div class="col-sm-2">
  @foreach (var rep in Model.Employments.reported) {
  <input class="outEmploy" 
         type="radio" 
         asp-for="Employments.Reported" 
         value="@rep" /> 
  @rep
  <span style="margin-right:5px"></span> }
</div>
<div class="form-group row">
  <div class="col">
    <input asp-for="Employments.PositionTitle" class="outEmploy form-control " />
  </div>
</div>

<div class="form-group row">
  <div class="col">
    <input asp-for="Employments.PositionTitle" class="outEmploy form-control" />
  </div>
</div>

     <input  type="submit" id="myBtn1" value="Submit"  />
    </form>

jQuery代码 #

$(function() {
  $('#employ').on('click', function() {
    if ($(this).is(':checked')) {
      $('.outEmploy').attr('required', 'required');
    } else {
      $('.outEmploy').removeAttr('required');
    }
  });
});

原因 #

1. 属性操作方法错误：required是布尔类型的DOM属性，使用attr()方法无法正确同步单选框的必填状态，应该用prop()方法来操作这类布尔属性。
2. 单选框校验逻辑特性：单选框的required校验是针对**同一组（相同name属性）**的，浏览器会检查该组中是否有选项被选中。虽然你的代码给每个单选框加了required，但attr()的方式没有让浏览器正确识别这个状态。

修复方案 #

将jQuery代码中的attr()替换为prop()，直接传入布尔值来设置必填状态：

$(function() {
  $('#employ').on('click', function() {
    const isChecked = $(this).is(':checked');
    $('.outEmploy').prop('required', isChecked);
  });
});

额外检查：确认所有单选框的name属性一致（通过asp-for绑定会自动生成相同的name，这一点应该没问题），如果name不同，浏览器会将它们视为独立的单选框，无法触发组校验。

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