使用EventListener控制国际象棋表单按钮禁用与启用的问题

问题概述 #

表单包含2个玩家下拉选择框（whiteplayername、blackplayername）和4个自定义姓名输入框（firstnamewhite、lastnamewhite、firstnameblack、lastnameblack）：

• 已实现功能：选择下拉姓名时，禁用对应自定义字段
• 当前问题：提交按钮仅在双方都选中下拉姓名时启用；取消任意一方选择，或修改自定义输入框内容时，按钮状态不会自动更新为禁用

问题原因 #

1. 仅监听了白方下拉框的change事件，黑方下拉框无事件监听
2. 自定义输入框未绑定input事件，无法实时触发表单验证
3. 原验证函数仅检查firstname字段，未覆盖lastname，且逻辑依赖外部参数，判断不准确

修复代码 #

替换原HTML中的<script>标签内容为以下代码：

document.addEventListener("DOMContentLoaded", function () {
    // 获取所有需要操作的DOM元素
    const whiteSelect = document.getElementById("whiteplayername");
    const blackSelect = document.getElementById("blackplayername");
    const whiteFirst = document.getElementById("firstnamewhite");
    const whiteLast = document.getElementById("lastnamewhite");
    const blackFirst = document.getElementById("firstnameblack");
    const blackLast = document.getElementById("lastnameblack");
    const submitBtn = document.getElementById("submit-button");

    // 页面加载时初始化按钮状态
    updateSubmitButtonState();

    // 白方下拉框切换事件
    whiteSelect.addEventListener("change", function () {
        toggleCustomFields(this, whiteFirst, whiteLast);
        updateSubmitButtonState();
    });

    // 黑方下拉框切换事件
    blackSelect.addEventListener("change", function () {
        toggleCustomFields(this, blackFirst, blackLast);
        updateSubmitButtonState();
    });

    // 自定义输入框实时输入事件
    [whiteFirst, whiteLast, blackFirst, blackLast].forEach(input => {
        input.addEventListener("input", updateSubmitButtonState);
    });

    // 切换自定义字段禁用状态
    function toggleCustomFields(selectElement, firstInput, lastInput) {
        const isDisabled = selectElement.value !== "";
        firstInput.disabled = isDisabled;
        lastInput.disabled = isDisabled;
    }

    // 验证表单并更新提交按钮状态
    function updateSubmitButtonState() {
        // 白方有效条件：下拉已选，或自定义名/姓至少填写一个
        const whiteValid = whiteSelect.value !== "" || 
                          (whiteFirst.value.trim() !== "" || whiteLast.value.trim() !== "");
        // 黑方有效条件：下拉已选，或自定义名/姓至少填写一个
        const blackValid = blackSelect.value !== "" || 
                          (blackFirst.value.trim() !== "" || blackLast.value.trim() !== "");
        // 双方都有效时，启用提交按钮
        submitBtn.disabled = !(whiteValid && blackValid);
    }
});

修复说明 #

1. 统一获取DOM元素，避免重复查询
2. 为黑方下拉框添加change事件，确保操作黑方选项时触发状态更新
3. 给四个自定义输入框绑定input事件，用户输入时实时验证表单
4. 重构禁用逻辑为toggleCustomFields函数，复用代码
5. 新增updateSubmitButtonState函数，集中处理验证逻辑：
   • 白/黑方有效判断：下拉有选中值，或自定义名、姓至少有一个不为空
   • 只有双方都满足有效条件时，提交按钮才会启用
6. 页面加载时自动执行一次验证，初始化按钮状态

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