单击后禁用提交按钮以防止用户向服务器发送多个请求答案

【问题标题】：Disable submit button after click to prevent users from sending multiple requests to server单击后禁用提交按钮以防止用户向服务器发送多个请求
【发布时间】：2014-05-13 13:17:29
【问题描述】：

我想防止用户多次单击服务器按钮导致向服务器发送多个类似请求。

按钮是 ASP.Net 按钮（Webforms）。网站上有很多页面，我不想为每个按钮编写一些代码。我想在母版页上为所有按钮执行此操作。

一种可能的解决方案是找到按钮并在单击后将其禁用。喜欢：

$("input[type='submit']").click(function(){
  $(this).attr('disabled','disabled');   
});

此代码工作正常，但会覆盖按钮的前一个 onclick 事件。所以按钮不会执行提交或它想要执行的任何其他任务。

另一个解决方案是在“onbeforesubmit”事件中禁用所有提交按钮。它们将在回发后立即启用。这也不是一个好的解决方案，因为有些按钮会通过 Ajax 更新部分页面，并且在回发后它们无法重新启用 ajax 面板之外的其他按钮。

有没有办法找到点击的提交按钮并禁用它并允许它执行它的 onclick 事件？

【问题讨论】：

标签： javascript jquery asp.net

【解决方案1】：

我找到了答案。因为我使用 asp.net 服务器按钮，所以如果我在客户端 onclick 事件中禁用按钮，则不会提交页面。相反，我在第二次单击时禁用了该按钮。在这种情况下，我可以确定该页面已经提交过一次：

        $("input[type='submit']").click(function (e) {
            if (e.target && Page_IsValid) {
                var attr = $(this).attr('submitting');
                if (typeof attr !== 'undefined' && attr !== false) { // If button has submitting attribute then do not submit it again.
                    $(this).prop('disabled', true);
                    $(this).removeAttr("submitting");
                    e.preventDefault();
                }
                else {
                    $(this).attr("submitting", "true"); // Add "submitting" attribute to prevent multiple submissions.
                }
            }
        });

【讨论】：

【解决方案2】：

尝试使用.one()：

将处理程序附加到元素的事件。处理程序被执行每个事件类型的每个元素最多一次。

$("input[type='submit']").one('click',function(){
    $(this).prop('disabled',true);   
});

另外，您应该使用.prop() 而不是.attr() 来设置input 的状态

【讨论】：

在 jQuery 1.9+ 版本中使用 .prop() 而不是 .attr()
感谢您的快速答复。我之前试过这个，但它在某些页面上不起作用。我找不到原因，但它在一些使用 AJAX 的页面中引起了非常奇怪的问题。我会尝试再次使用它，如果它有效，我会向你求助。谢谢。
此代码不起作用，因为它仍然会覆盖提交按钮的 onclick。通过使用这个我的提交按钮（asp.net 服务器按钮）不做任何事情，点击后它们将被禁用。

【解决方案3】：

或者这个呢？

$("body").on("click", ".js-submit-button", function() {
        var $this = $(this);
        $this.prop("disabled", true);
        $this.closest("form").submit();
    });

【讨论】：