Javascript 单击后禁用asp.net按钮以防止双击

Disable asp.net button after click to prevent double clicking

提问by Goutham

I have an ASP.NET button that I need to disable after the user clicks it to prevent double-clicking. Once the submit completes it has to be enabled again. Can anyone help me with this?

我有一个 ASP.NET 按钮，我需要在用户单击它后将其禁用以防止双击。提交完成后，必须再次启用它。谁能帮我这个？

回答by kmonty

Here is a solution that works for the asp.net button object. On the front end, add these attributes to your asp:Button definition:

这是适用于 asp.net 按钮对象的解决方案。在前端，将这些属性添加到您的 asp:Button 定义中：

<asp:Button ... OnClientClick="this.disabled=true;" UseSubmitBehavior="false" />

In the back end, in the click event handler method call, add this code to the end (preferably in a finally block)

在后端，在click事件处理程序方法调用中，将这段代码添加到最后（最好在finally块中）

myButton.Enabled = true;

回答by gkneo

I have found this, and it works:

我找到了这个，它有效：

btnSave.Attributes.Add(
    "onclick", 
    "this.disabled = true;" + ClientScript.GetPostBackEventReference(btnSave, null) + ";");

回答by mohan padmanabhan

Check this link, the most simplest way and it does not disable the validations.

检查此链接，这是最简单的方法，它不会禁用验证。

http://aspsnippets.com/Articles/Disable-Button-before-Page-PostBack-in-ASP.Net.aspx

http://aspsnippets.com/Articles/Disable-Button-before-Page-PostBack-in-ASP.Net.aspx

If you have e.g.

如果你有例如

  <form id="form1" runat="server">
      <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Clicked" />
  </form>

Then you can use

然后你可以使用

  <script type = "text/javascript">
  function DisableButton() {
      document.getElementById("<%=Button1.ClientID %>").disabled = true;
  }
  window.onbeforeunload = DisableButton;
  </script>

To disable the button ifand aftervalidation has succeeded, just as the page is doing a server postback.

如果验证成功并在验证成功后禁用该按钮，就像页面正在执行服务器回发一样。

回答by Shaun Keon

If you want to prevent double clicking due to a slow responding server side code then this works fine:

如果您想防止由于响应缓慢的服务器端代码而导致双击，那么这可以正常工作：

<asp:Button ... OnClientClick="this.disabled=true;" UseSubmitBehavior="false" />

Try putting a Threading.Thread.Sleep(5000) on the _Click() event on the server and you will see the button is disabled for the time that the server is processing the click event.

尝试将 Threading.Thread.Sleep(5000) 放在服务器上的 _Click() 事件上，您将看到该按钮在服务器处理点击事件时被禁用。

No need for server side code to re-enable the button either!

也不需要服务器端代码来重新启用按钮！

回答by eqiz

If anyone cares I found this post initially, but I use ASP.NET's build in Validation on the page. The solutions work, but disable the button even if its been validated. You can use this following code in order to make it so it only disables the button if it passes page validation.

如果有人关心我最初发现了这篇文章，但我在页面上使用了 ASP.NET 的内置验证。解决方案有效，但即使经过验证也要禁用该按钮。您可以使用以下代码来使其仅在通过页面验证时禁用该按钮。

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" OnClientClick=" if ( Page_ClientValidate() ) { this.value='Submitting..'; this.disabled=true; }" UseSubmitBehavior="false" />

回答by Reshma

<asp:Button ID="btnSend" runat="server" Text="Submit"  OnClick="Button_Click"/>

---

---

        <script type = "text/javascript">
            function DisableButton()
            {
                document.getElementById("<%=btnSend.ClientID %>").disabled = true;
            }
            window.onbeforeunload = DisableButton;
        </script>

回答by Sachin Karche

Just need to add 2 attributes for asp button :

只需要为 asp 按钮添加 2 个属性：

OnClientClick="this.disabled='true';"  UseSubmitBehavior="false"

e.g.

例如

<asp:Button ID="Button1" runat="server" Text="TEST" OnClientClick="this.disabled='true';"  UseSubmitBehavior="false" CssClass="button-content btnwidth" OnClick="ServerSideMethod_Click"  />

For more details:

更多细节：

https://bytes.com/topic/asp-net/answers/918280-disable-button-click-prevent-multiple-postbacks

https://bytes.com/topic/asp-net/answers/918280-disable-button-click-prevent-multiple-postbacks

回答by Federico González

You can use the client-side onclickevent to do that:

您可以使用客户端onclick事件来做到这一点：

yourButton.Attributes.Add("onclick", "this.disabled=true;");

回答by rick schott

Disable the button on the OnClick event, then re-enable on the AJAX callback event handler. Here is how I do it with jQuery.

禁用 OnClick 事件上的按钮，然后重新启用 AJAX 回调事件处理程序。这是我如何使用 jQuery 做到这一点。

<script>
$(document).ready(function() {

    $('#buttonId').click(function() {
         $(this).attr('disabled', 'disabled');
         callAjax();
    });

});

function callAjax()
{
    $.ajax({
      url: 'ajax/test.html',
      success: function(data) {
         //enable button
         $('#buttonId').removeAttr('disabled');

      }
    });
}
</script>

回答by Taylor Brown

I like to disable the button and call a postback, this way the code behind still gets run after the button is disabled.

我喜欢禁用按钮并调用回发，这样在按钮禁用后仍然可以运行背后的代码。

this is how i attach from code behind:

这是我从后面的代码附加的方式：

btnProcess.Attributes.Add("onclick", " this.disabled = true; __doPostBack('btnProcess', ''); return false;")

Then re-enable the button in code behind:

然后在后面的代码中重新启用按钮：

btnProcess.Enabled = True