如何在输入框输入内容时修改对应提交按钮的CSS类？

问题分析 #

你的现有代码存在几个关键问题：

• 输入框未设置有效id，导致getElementById无法获取目标元素
• 误用了jQuery的.addClass()/.removeClass()方法，原生JS的NodeList不支持这类语法，需用classList操作类名
• 当前逻辑会修改所有提交按钮，而你需要的是修改当前输入框所在行的对应按钮
• 未验证输入是否为数字，仅判断是否为空，不符合需求

修正后的代码实现 #

1. 优化HTML（推荐）

将输入框类型改为number，自动限制数字输入，同时保留原有样式类：

<div class="col-md-4">
    <table class="table">
        <tbody>
        <tr class="bg-danger">
            <form action="">
                <td class="align-middle">
                    <p>
                        <input type="number" class="form-forecast showError" name="" id="" aria-label="" required>
                        <span class="errorMsg"></span>
                    </p>
                    <p>
                        <input type="number" class="form-forecast showError" name="" id="" aria-label="" required>
                        <span class="errorMsg"></span>
                    </p>
                </td>
                <td class="align-middle">
                    <button type="submit" class="btn btn-block btn-secondary submit">Reg</button>
                </td>
            </form>
        </tr>
        <tr class="bg-warning">
            <form action="">
                <td class="align-middle">
                    <p>
                        <input type="number" class="form-forecast showError" name="" id="" aria-label="" required>
                        <span class="errorMsg"></span>
                    </p>
                    <p>
                        <input type="number" class="form-forecast showError" name="" id="" aria-label="" required>
                        <span class="errorMsg"></span>
                    </p>
                </td>
                <td class="align-middle">
                    <button type="submit" class="btn btn-block btn-secondary submit">Reg</button>
                </td>
            </form>
        </tr>
        <tr class="bg-info">
            <form action="">
                <td class="align-middle">
                    <p>
                        <input type="number" class="form-forecast showError" name="" id="" aria-label="" required>
                        <span class="errorMsg"></span>
                    </p>
                    <p>
                        <input type="number" class="form-forecast showError" name="" id="" aria-label="" required>
                        <span class="errorMsg"></span>
                    </p>
                </td>
                <td class="align-middle">
                    <button type="submit" class="btn btn-block btn-secondary submit">Reg</button>
                </td>
            </form>
        </tr>
        </tbody>
    </table>
</div>

2. 原生JavaScript逻辑

使用事件委托监听输入行为，精准定位对应行的提交按钮，验证数字输入后切换类名：

// 事件委托：监听全局input事件，仅处理目标为输入框的情况
document.addEventListener('input', function(e) {
    // 过滤非目标输入框
    if (!e.target.classList.contains('form-forecast')) return;

    // 获取当前输入框所在的表单
    const form = e.target.closest('form');
    if (!form) return;

    // 获取当前表单内的两个输入框
    const inputs = form.querySelectorAll('.form-forecast');
    // 验证两个输入框是否都有非空的有效数字
    const allValid = Array.from(inputs).every(input => {
        const value = input.value.trim();
        return value !== '' && !isNaN(Number(value));
    });

    // 获取当前表单的提交按钮
    const submitBtn = form.querySelector('.submit');
    if (!submitBtn) return;

    // 切换按钮样式类
    if (allValid) {
        submitBtn.classList.remove('btn-secondary');
        submitBtn.classList.add('btn-warning');
    } else {
        submitBtn.classList.remove('btn-warning');
        submitBtn.classList.add('btn-secondary');
    }
});

核心说明 #

• 事件委托：无需给每个输入框单独绑定事件，监听全局事件后过滤目标，性能更优
• 精准定位：用closest('form')锁定当前输入框所在表单，确保只修改对应行的按钮
• 数字验证：通过!isNaN(Number(input.value))判断输入是否为有效数字，同时检查非空
• 原生类操作：用classList.add()/classList.remove()实现类名切换，替代jQuery语法

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