Question

如果这是一个基本的东西，请原谅我，因为我是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验证时禁用。感谢

Answer 1

试试这个让我知道：

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

Answer 2

最好将处理程序附加到submit事件而不是click事件，因为{/ 1}}事件仅在验证成功后才会被触发 。（这样您就不必自己检查有效性。）

但请注意，如果禁用了提交按钮，则他们可能保留的任何值都不会提交给服务器。因此我们需要在表单提交后禁用输入。

新的HTML5属性submit使问题更加复杂，只要其form属性与表单ID匹配，就允许相关输入在页面上任何地方。< / p>
这是我使用的JQuery代码段：

form

--- [警告] ---

虽然禁用提交按钮会阻止多个表单提交，但如果用户单击$(document).ready( function() { $("form").on("submit", function(event) { var $target = $(event.target); var formId = $target.attr("id"); // let the submit values get submitted before we disable them window.setTimeout(function() { // disable all submits inside the form $target.find("[type=submit]").prop("disabled", true); // disable all HTML5 submits outside the form $("[form=" + formId + "][type=submit]").prop("disabled", true); }, 2); // 2ms }); });按钮，则按钮会产生令人遗憾的副作用。

想想这个场景，用户编辑了一些文本，点击了提交（并重定向到不同的页面以查看编辑内容），点击返回以编辑更多内容，......以及......他们无法重新提交！

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

[Back]

Answer 3

试试这个

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

在成功验证表单

时运行此代码

Answer 4

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.closest（＆＃34; form＆＃34;）背后 [0] 的原因。

使用此代码，您只需要在按钮，输入，链接或任何您需要的位置添加 class =＆＃34;禁用后点击＆＃34; ...

在HTML5验证后禁用所有表单上的提交按钮的常见jQuery

4 个答案: