Ajax提交时表单字段无法禁用问题求助

嘿，我明白你的问题了——你想在Ajax提交成功后把整个表单的所有字段都禁用，但直接给<form>标签加disabled属性根本不管用，对吧？

这其实是因为HTML的<form>元素本身并没有disabled属性，这个属性是专门给表单控件（比如input、select、textarea这些）用的。所以你直接给form设置disabled是无效的，得换个方式处理。

正确的解决方案 #

你可以通过遍历表单内的所有可交互控件，逐个设置它们的disabled状态。这里推荐用jQuery的prop()方法而不是attr()，因为disabled是一个布尔型的DOM属性，prop()能更准确地控制它的状态。

修改你的Ajax成功回调代码：

success: function(result){
    $("#resultaat").html(result);
    var btnSubmit = $('#uploadenFormSend');
    btnSubmit.val("Wacht op goedkeuring");
    btnSubmit.prop("disabled", true);
    
    // 禁用表单内所有的输入控件
    var compl_form = $("form#updateBeschikbaarheid");
    compl_form.find(':input').prop('disabled', true);
}

为什么用prop()而不是attr()？ #

• attr()是操作HTML标签上的属性值，比如<input disabled="disabled">里的字符串值；
• prop()是操作DOM元素本身的属性状态，对于布尔型属性（比如disabled、checked），用prop()能直接设置true/false，更符合逻辑。

额外优化：防止重复提交（可选） #

如果你想在用户点击提交按钮后立刻禁用所有控件（而不是等Ajax成功后），可以把禁用代码放到submit事件的开头，这样能避免用户多次点击提交：

$("form#updateBeschikbaarheid").submit(function(event) {
    event.preventDefault();
    var compl_form = $(this);
    // 先禁用所有控件，防止重复提交
    compl_form.find(':input').prop('disabled', true);
    var btnSubmit = $('#uploadenFormSend');
    btnSubmit.val("Bezig met verzenden...");
    
    var formData = compl_form.serialize(); // 用form的serialize更准确，避免获取到其他表单的控件
    $.ajax({
        type: "POST",
        url: "beschikbaarheid.insert.php",
        data: formData,
        success: function(result){
            $("#resultaat").html(result);
            btnSubmit.val("Wacht op goedkeuring");
        },
        error: function(){
            // 如果Ajax失败，可以恢复控件状态，方便用户重试
            compl_form.find(':input').prop('disabled', false);
            btnSubmit.val("Probeer opnieuw");
        }
    });
});

这样调整后，整个表单的所有输入字段和提交按钮都会被正确禁用啦～

内容的提问来源于stack exchange，提问作者Rick A.