预选中复选框时required校验脚本失效问题求助

问题出在你的校验逻辑仅在复选框change事件触发时执行，页面初始化时预选中的复选框不会触发该事件，导致所有复选框仍保留required属性，提交表单时浏览器会判定未选中任何选项。

修改后的代码 #

<div class="options111">
 a : <input type="checkbox" name="a" class="check" required><br>
 b : <input type="checkbox" name="b" class="check" required><br>
 c : <input type="checkbox" name="c" class="check" required><br>
 d : <input type="checkbox" name="d" class="check" required><br>
 e : <input type="checkbox" name="e" class="check" required checked><br>   
</div>

$(function(){ // checkbox REQUIRED
    var requiredCheckboxes = $('.options111 :checkbox[required]');
    
    // 封装校验逻辑为独立函数
    function updateRequiredStatus() {
        const hasChecked = requiredCheckboxes.is(':checked');
        requiredCheckboxes.prop('required', !hasChecked);
    }
    
    // 页面初始化时主动执行一次，处理预选中情况
    updateRequiredStatus();
    
    // 复选框状态变化时触发校验
    requiredCheckboxes.change(updateRequiredStatus);
});

关键修改点 #

1. 初始化时执行校验：页面加载完成后立即调用updateRequiredStatus，检测预选中的复选框，动态更新required属性状态。
2. 使用prop()替代attr()：required是布尔类型的DOM属性，prop()能直接操作其布尔值（true/false），比attr()操作字符串属性更准确，避免状态不一致问题。

适配Ajax动态加载场景 #

如果表单是通过Ajax动态加载的，需要在内容加载完成后重新初始化校验逻辑：

$.ajax({
    url: '表单加载地址',
    success: function(html) {
        // 插入动态内容
        $('#目标容器').html(html);
        // 重新获取复选框元素
        requiredCheckboxes = $('.options111 :checkbox[required]');
        // 更新校验状态并绑定事件
        updateRequiredStatus();
        requiredCheckboxes.off('change').change(updateRequiredStatus);
    }
});

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