jQuery实现表单提交后禁用按钮时PHP代码不执行问题

你现在的代码有两个核心问题，导致功能异常：

1. e.preventDefault()会直接阻断表单的原生提交行为，哪怕后续写return true也不会恢复提交，后端PHP根本接收不到POST请求，自然不会执行对应输出逻辑。
2. 删掉e.preventDefault()后依旧异常的原因：你在表单收集提交参数的阶段就把提交按钮设为了禁用状态，被禁用的表单控件值不会被带入POST请求，后端拿不到submit字段，isset($_POST['submit'])判断永远不成立；同时同步执行的禁用操作还没来得及渲染到页面，表单就已经触发跳转刷新，你也看不到按钮置灰的效果。

按以下三点调整代码即可：

• 删除e.preventDefault()行，不要阻断表单默认提交行为。
• 把按钮禁用逻辑套一层setTimeout(..., 0)，把禁用操作推到宏任务队列尾部，等浏览器完成表单参数序列化收集之后再执行禁用，既不影响参数传递，又能在请求发出后立刻给用户展示按钮置灰效果，避免重复提交。
• 用jQuery的.prop()代替.attr()设置禁用状态，jQuery1.6及以上版本对表单布尔属性的操作，.prop()的兼容性和准确性更高。

修复后的完整可运行代码：

<!DOCTYPE html>
<html lang="zh-CN">
<body>
<h1>jQuery - 点击后禁用提交按钮实现</h1>

<form id="formABC" method="POST">
    <input type="submit" name="submit" id="btnSubmit" value="Submit">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input type="button" value="普通测试按钮" id="btnTest">

<script>
$(document).ready(function () {
    $("#formABC").submit(function () {
        // 延迟执行禁用，等表单完成参数收集后再置灰按钮
        setTimeout(function(){
            $("#btnSubmit").prop("disabled", true);
            $("#btnTest").prop("disabled", true);
        }, 0);
    });
});
</script>

<?php
if (isset($_POST['submit'])) {
    echo "test";
}
?>
</body>
</html>

逻辑说明：setTimeout的延迟设为0不是真的立刻执行，JS单线程模型会先执行完当前调用栈的所有任务（包括浏览器收集表单参数、准备提交请求的逻辑），再执行队列里的禁用逻辑，完全不影响请求参数传递，用户侧感知不到延迟，点击后立刻就能看到按钮置灰。

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