如何实现点击任一Submit按钮时禁用两个提交按钮？

当然有可行的实现方法啦，这个需求主要是为了避免用户重复提交表单，下面给你几种不同的实现方案，你可以根据项目情况选择：

方案1：原生JavaScript（无依赖，推荐） #

这种方法不需要任何外部库，兼容性拉满，而且监听表单提交事件的方式能覆盖所有提交场景（比如用户按回车提交），非常稳妥。

首先确保你的按钮放在表单里，然后添加这段脚本：

<form id="submitForm">
    <button type="submit" name="SubmitButton" value="accept" id="buttonAccept">Accept</button>
    <button type="submit" name="SubmitButton" value="refuse" id="buttonRefuse">Refuse</button>
</form>

<script>
    // 获取表单和按钮元素
    const targetForm = document.getElementById('submitForm');
    const acceptBtn = document.getElementById('buttonAccept');
    const refuseBtn = document.getElementById('buttonRefuse');

    // 监听表单提交事件
    targetForm.addEventListener('submit', function() {
        // 禁用两个按钮
        acceptBtn.disabled = true;
        refuseBtn.disabled = true;
        // 可选：修改按钮文本，给用户反馈
        acceptBtn.textContent = '处理中...';
        refuseBtn.textContent = '处理中...';
    });
</script>

原理很简单：不管用户点击哪个按钮触发提交，表单的submit事件都会被触发，这时我们直接把两个按钮的disabled属性设为true，就完成了禁用。

方案2：直接给按钮绑定点击事件 #

如果你不想监听表单，也可以直接给每个按钮绑定点击事件，逻辑更直接，但要注意这种方式无法覆盖回车提交的场景：

<button type="submit" name="SubmitButton" value="accept" id="buttonAccept" onclick="disableBothButtons()">Accept</button>
<button type="submit" name="SubmitButton" value="refuse" id="buttonRefuse" onclick="disableBothButtons()">Refuse</button>

<script>
    function disableBothButtons() {
        // 获取按钮并禁用
        document.getElementById('buttonAccept').disabled = true;
        document.getElementById('buttonRefuse').disabled = true;
        // 可选：更新按钮文本
        document.getElementById('buttonAccept').textContent = '处理中...';
        document.getElementById('buttonRefuse').textContent = '处理中...';
    }
</script>

方案3：jQuery实现（如果项目已引入jQuery） #

如果你的项目已经在用jQuery，代码可以写得更简洁：

<form id="submitForm">
    <button type="submit" name="SubmitButton" value="accept" id="buttonAccept">Accept</button>
    <button type="submit" name="SubmitButton" value="refuse" id="buttonRefuse">Refuse</button>
</form>

<script>
    $('#submitForm').on('submit', function() {
        // 一次性选中两个按钮，设置禁用状态并修改文本
        $('#buttonAccept, #buttonRefuse').prop('disabled', true).text('处理中...');
    });
</script>

小提示 #

• 禁用按钮不会影响表单提交，因为我们是在提交事件触发后才禁用的，表单的提交逻辑会正常执行。
• 如果你的表单是AJAX异步提交，记得在请求完成（成功或失败）后恢复按钮的可用状态，方便用户重试。

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