Javascript 用于在HTML5验证后禁用所有表单上的提交按钮的通用jQuery

如果这是一件基本的事情，请原谅，因为我是Javascript/jQuery的新手。我一直试图禁用提交按钮，以禁用多个提交。我在这里也遇到了多种解决方案，但所有这些都使用了特定的表单名称。但我想为所有页面上的所有表单应用一个全局解决方案，这样我就不必在每个页面上编写代码，所以我把它放在页脚中，这样所有页面都有：

$('input:submit').click(function(){
        $('input:submit').attr("disabled", true);
});

正如我所希望的，这段代码可以在所有页面中的所有表单上运行，但是如果表单中有HTML5必填字段，并且表单提交时没有这些字段，那么当然会弹出通知，但按钮仍然会被禁用。所以，我试着用这个：

$('input:submit').click(function(){
    if ($(this).valid()) {
        $('input:submit').attr("disabled", true);
        $('.button').hide();
    });
});

但这是行不通的。请帮助我，使jQuery仅在所有HTML5验证完成时禁用。谢谢你试试这个

`jQuery('input[type=submit]').click(function(){ return true;jQuery(this).prop('disabled','disabled');})`

---

在成功验证表单时运行此代码

尝试此操作并通知我：

$('input:submit').click(function(){
    if ($(this).closest("form").checkValidity()) {
        $('input:submit').attr("disabled", true);
        $('.button').hide();
    });
});

---

Ruprit，谢谢你的提示。您的示例（在Firefox中）对我不起作用，但它对我帮助很大

以下是我的工作解决方案：

$(document).on("click", ".disable-after-click", function() {
    var $this = $(this);

    if ($this.closest("form")[0].checkValidity()) {
        $this.attr("disabled", true);
        $this.text("Saving...");
    }
});

由于checkValidity（）不是jQuery函数而是JavaScript函数，因此需要访问JavaScript元素，而不是jQuery对象。这就是为什么$this.nexist（“表单”）后面必须有[0]的原因

---

使用此代码，您只需将class=“单击后禁用”添加到按钮、输入、链接或您需要的任何内容…

最好将处理程序附加到

提交

事件，而不是

单击

事件，因为只有在验证成功后才会触发

提交

事件。（这使您无需亲自检查有效性。）

但请注意，如果“提交”按钮被禁用，则它们可能持有的任何值都不会提交到服务器。因此，我们需要在表单提交后禁用输入

新的HTML5属性

form

使问题更加复杂，该属性允许相关输入位于页面的任何位置，只要它们的

form

属性与表单ID匹配

这是我使用的JQuery代码段：

$（文档）.ready（函数（）{
$（“表格”）。在“提交”上，功能（事件）{
var$target=$（event.target）；
var formId=$target.attr（“id”）；
//在禁用提交值之前，先将其提交
setTimeout（函数（）{
//禁用表单内的所有提交
$target.find（“[type=submit]”）.prop（“disabled”，true）；
//禁用表单外部的所有HTML5提交
$（“[form=“+formId+”][type=submit]”）prop（“disabled”，true）；
}，2）；/2ms
});
});

---[警告]---

虽然禁用提交按钮可防止多个表单提交，但如果用户单击

[Back]

按钮，这些按钮会产生不幸的副作用，即保持禁用状态

考虑一下这个场景，用户编辑一些文本，单击提交（并被重定向到不同的页面以查看编辑），单击返回以编辑更多内容。。。而且。。。他们不能再屈服了

解决方案是在页面加载时（重新）启用提交按钮：

//如果用户在“保存和查看”后单击“上一步”，请重新启用“提交”按钮
$（文档）.ready（函数（）{
$（“形式”）。每个（函数（）{
var$target=$（这是）；
var formId=$target.attr（“id”）；
//启用表单内的所有提交
$target.find（“[type=submit]”）.prop（“disabled”，false）；
//启用表单外部的所有HTML5提交
$（“[form=“+formId+”][type=submit]”）prop（“disabled”，false）；
});
});

可能是您可以尝试

$（'form'）.on（'submit'，function（）{$（this）.find（'input:submit'）.attr（“disabled”，true）；}）

comments无法选择作为答案，如果它对您有效：）有效，但我必须小心使用您的语法，并使用下标来获取由Nestest（）返回的数组中的第一个表单