如何校验所有必填字段（含单选/复选框）已填写以启用提交按钮？

你的现有代码只监听了输入框的keyup事件，且仅检查当前触发事件的字段，所以会出现填一个就启用按钮的情况。要实现所有必填字段完成后才启用按钮，需要从事件监听范围、全字段校验逻辑、不同输入类型适配三个方面修改：

核心修改思路 #

• 监听所有必填字段的全类型交互事件（keyup/input/change），覆盖文本输入、单选/复选选择的场景
• 每次触发事件时，遍历所有必填字段逐一校验，而不是只检查当前字段
• 针对不同输入类型做针对性校验：文本类非空、单选组需有选中项、复选框需选中

修改后的代码 #

$(document).ready(function(){
    // 给所有必填字段绑定事件：覆盖文本输入、单选/复选选择
    $('input[required]').on('keyup input change', function(){
        let allFilled = true;
        
        // 遍历所有必填字段，逐个校验
        $('input[required]').each(function(){
            const $field = $(this);
            const type = $field.attr('type');
            
            // 文本类输入（text/email/password等）：检查值是否非空
            if (['text', 'email', 'password', 'number', 'tel'].includes(type)) {
                if (!$.trim($field.val())) {
                    allFilled = false;
                    return false; // 终止遍历，只要有一个未填就不用继续
                }
            } 
            // 单选框：检查同组是否有选中项
            else if (type === 'radio') {
                const name = $field.attr('name');
                if (!$(`input[name="${name}"][required]:checked`).length) {
                    allFilled = false;
                    return false;
                }
            } 
            // 复选框：检查是否选中（单个必填复选框的场景）
            else if (type === 'checkbox') {
                if (!$field.is(':checked')) {
                    allFilled = false;
                    return false;
                }
            }
        });
        
        // 根据校验结果设置按钮状态
        if (allFilled) {
            $('#register').css('opacity', '1').prop('disabled', false);
        } else {
            $('#register').css('opacity', '0.2').prop('disabled', true);
        }
    });

    // 页面加载时先执行一次校验，确保初始状态正确
    $('input[required]').first().trigger('change');
});

关键细节说明 #

• 用prop('disabled', true/false)替代attr/removeAttr：disabled是布尔属性，prop方法更贴合原生DOM的属性操作逻辑
• 文本校验用$.trim()：避免用户只输入空格被误判为已填写
• 单选框按name分组校验：确保同组必填单选至少选一个
• 页面加载时触发一次校验：防止页面初始化时按钮状态错误

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