如何用HTML和JS在所有必填字段（含下拉、单选）填完前禁用提交按钮

问题根源 #

当前代码按钮始终禁用的原因：

• 单选按钮仅首个添加了required类，且未绑定触发校验的事件，选择其他单选时不会触发校验
• 校验逻辑只针对文本输入的value判断，没考虑单选按钮的选中状态——单选的value本身不为空，需要判断同组是否有选中项
• 第二个下拉菜单未绑定onchange事件，切换选项时不会触发校验
• 下拉菜单绑定了无用的onkeyup事件，下拉操作不会触发键盘事件

修复方案 #

1. 统一字段标识与事件绑定：给所有必填单选按钮加required类，绑定onclick事件；下拉菜单只保留onchange事件，移除onkeyup和原生required属性
2. 优化校验逻辑：区分输入类型，分别处理下拉和单选的校验：
   • 下拉菜单：判断选中选项的value是否为空
   • 单选按钮：按name分组，检查同组是否有被选中的项

完整代码 #

JavaScript 代码

function enableSubmit(){
    let btn = document.querySelector('button[type="submit"]');
    let isValid = true;

    // 校验下拉菜单
    const selects = document.querySelectorAll('select.required');
    selects.forEach(select => {
        if (select.value.trim() === "") {
            isValid = false;
        }
    });

    // 校验单选按钮（按name分组）
    const radioNames = new Set();
    document.querySelectorAll('input[type="radio"].required').forEach(radio => {
        radioNames.add(radio.name);
    });
    radioNames.forEach(name => {
        const hasChecked = document.querySelector(`input[type="radio"][name="${name}"]:checked`) !== null;
        if (!hasChecked) {
            isValid = false;
        }
    });

    btn.disabled = !isValid;
}

HTML 代码

<div class="dropdown">
    <div class="dropdownchild">
        <select id="stroke" name="stroke" onchange="enableSubmit()" class="required">
            <option value="">Stroke</option>
            <option value="fly">Butterfly</option>
            <option value="back">Backstroke</option>
            <option value="breast">Breaststroke</option>
            <option value="free">Freestyle</option>
            <option value="im">Individual Medley</option>
        </select>
    </div>
    <div class="dropdownchild">
        <select id="gender" name="gender" onchange="enableSubmit()" class="required">
            <option value="">Gender</option>
            <option value="m">Male</option>
            <option value="f">Female</option>
        </select>
    </div>
</div>

<div class="radio-toolbar">
    <input type="radio" id="100" name="distance" value="100" class="required" onclick="enableSubmit()">
    <label id="100l" for="100">100m</label>

    <input type="radio" id="200" name="distance" value="200" class="required" onclick="enableSubmit()">
    <label id="200l" for="200">200m</label>

    <input type="radio" id="400" name="distance" value="400" class="required" onclick="enableSubmit()">
    <label id="400l" for="400">400m</label>

    <input type="radio" id="800" name="distance" value="800" class="required" onclick="enableSubmit()">
    <label id="800l" for="800">800m</label>

    <input type="radio" id="1500" name="distance" value="1500" class="required" onclick="enableSubmit()">
    <label id="1500l" for="1500">1500m</label>
</div>
<button id="calculate" type="submit" form="entry" value="Submit" onClick="validatefilledIn()" disabled>
    Calculate
</button>

说明 #

• 所有必填字段通过required类标识，避免依赖原生required属性（防止被审查元素移除）
• 校验逻辑完全在JS中处理，下拉切换和单选点击都会实时触发校验
• 单选按name分组校验，确保同组必须选中一项；下拉确保选中非空选项

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