在单击提交按钮时禁用该按钮，将阻止在Google Chrome上提交表单

Question

我已经在布局视图中添加了以下脚本，在我的asp.net mvc中：

$(document).ready(function () {
    $('.btn.btn-primary').click(function () {
        $(this).prop("disabled", true);
        if (!$('form').valid()) {
            $(this).prop("disabled", false);
            return false;
        }
    });
    $('form').change(function () {
        $('.btn.btn-primary').prop("disabled", false);
    });

我的脚本的目的是禁用提交按钮，并在模型无效或用户更改表单值时重新启用它们。上面的脚本在IE和Firefox上运行良好，但在Chrome上我无法提交表单，因为当用户单击提交按钮时，该按钮将被禁用，但表单将不会被提交。你知道我如何在Chrome上解决这个问题吗？

Answer 1

在按钮的单击事件中禁用按钮-在表单的提交事件中禁用它(您也可以在那里检查表单的有效性)。

通过这种方式，它将在所有浏览器中通用工作。

<form action="http://www.microsoft.com">
  <input class="btn-primary" type="submit" value="submit"/>
</form>


$('form').submit(function() {
  $('input.btn-primary').prop("disabled", "disabled");
})

Answer 2

我刚刚遇到了同样的问题，当按钮通过jQuery获得disabled时，Google Chrome没有触发我的提交事件。

背景资料:我有一个表单与一个按钮，应被禁用，无论何时点击。所以PHP提交代码不会被多次调用。提交程序运行在Drupal后端上，在我的例子中是一个自定义的submit_hook。但可以肯定的是，在任何其他CMS中都可以工作。但这不是问题所在。真正的问题是Javascript代码禁用了按钮，Google Chrome认为按钮完全死了，而不仅仅是禁用了。因此，它不再触发任何代码。

但是这个问题很容易解决。

这段代码可以在Firefox/IE上运行

(function($) {
Drupal.behaviors.somebehaviour = {
    attach: function(context, settings) {
        $('#edit-submit').click(function (e) {
            $('#edit-submit').val('Is saved...');
            $('#edit-submit').prop('disabled', 'disabled');
        });
    }
};
})(jQuery);

要想让它在Chrome上运行，你需要添加下面这行代码：

$(this).parents('form').submit();

因此，对于这个示例，它最终将是：

(function($) {
Drupal.behaviors.somebehaviour = {
    attach: function(context, settings) {
        $('#edit-submit').click(function (e) {
            $('#edit-submit').val('Is saved...');
            $('#edit-submit').prop('disabled', 'disabled');
            $(this).parents('form').submit();
        });
    }
};
})(jQuery);