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

【问题标题】：Disable asp.net button after click to prevent double clicking单击后禁用asp.net按钮以防止双击
【发布时间】：2011-07-08 13:22:12
【问题描述】：

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

【问题讨论】：

你想要的代码完成后很简单 button.enable = false
这是普通的回发还是 AJAX？
如果您不想逐个按钮地解决此问题，请查看我对另一个问题的回答：stackoverflow.com/a/28844217/787757

标签： javascript jquery asp.net asp.net-ajax

【解决方案1】：

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

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

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

myButton.Enabled = true;

【讨论】：

第 1 天使用 asp.net，我的按钮被禁用但再也没有启用，我可能会错过什么
它不起作用。我的按钮仍处于启用状态，我可以在它仍在处理响应时再次单击它。

【解决方案2】：

我找到了this，它有效：

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

【讨论】：

什么是 clientScript ？
我相信他们指的是 Page.ClientScript（在 System.Web.UI 命名空间中）stackoverflow.com/questions/11808329/…

【解决方案3】：

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

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

如果你有例如

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

然后就可以使用了

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

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

【讨论】：

不幸的是，这似乎不起作用。该按钮在等待帖子完成时仍处于启用状态（这意味着您可以多次单击它）。
优秀的解决方案！它非常适合我，谢谢！！。

【解决方案4】：

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

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

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

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

【讨论】：

完美地完成了我需要完成的工作。您还可以添加this.style.backgroundcolor = '#abcdef'; 来更改元素的样式。
这非常有效。只是想强调UseSubmitBehavior="false" 的必要性，否则，您的按钮单击将不会在代码隐藏中触发。
@ShawnGavett 你在哪里添加那行？
@Zizzipupp - 您可以创建一个 CSS 类并将其应用于按钮上的 CssClass 属性，或者您可以使用 Style 属性进行内联样式。

【解决方案5】：

如果有人关心我最初发现了这篇文章，但我在页面上使用了 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" />

【讨论】：

这是我能找到的唯一有效的答案！更好的是，按钮会发生变化，让用户知道它正在提交（没有巨大的 DIV 覆盖或其他废话！）

【解决方案6】：

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

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

例如

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

【讨论】：

【解决方案7】：

<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>

【讨论】：

【解决方案8】：

您可以使用客户端 onclick 事件来执行此操作：

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

【讨论】：

【解决方案9】：

在 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>

【讨论】：

你把这段代码放在哪里？如果它是一个独立的脚本，你如何从 c# 代码隐藏中调用它？
也可以，棘手的部分是生成了 Id，因此如果将其放入独立脚本中，则需要将其传递给函数。

【解决方案10】：

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

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

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

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

btnProcess.Enabled = True

【讨论】：

【解决方案11】：

使用 jQuery：

$('form').submit(function(){
    $(':submit', this).click(function() {
        return false;
    });
});

【讨论】：

【解决方案12】：

试试这个，它对我有用

<asp:Button ID="button" runat="server" CssClass="normalButton" 
Text="Button"  OnClick="Button_Click" ClientIDMode="Static" 
OnClientClick="this.disabled = true; setTimeout('enableButton()', 1500);" 
UseSubmitBehavior="False"/>

然后

<script type="text/javascript">
function enableButton() {
document.getElementById('button').disabled = false;
}
</script>

你可以在“setTimeout”中调整延迟时间

【讨论】：

为什么是getElementById('button')？应该是 ?

【解决方案13】：

如果您使用的是 asp.net 验证器，则此解决方案有效：

<script language="javascript" type="text/javascript">
function disableButton(sender,group)
{
    Page_ClientValidate(group);
    if (Page_IsValid)
    {
        sender.disabled = "disabled";
        __doPostBack(sender.name, '');
    }
}</script>

并更改按钮：

<asp:Button runat="server" ID="btnSendMessage" Text="Send" OnClick="btnSendMessage_OnClick" OnClientClick="disableButton(this,'theValidationGroup')" CausesValidation="true" ValidationGroup="theValidationGroup" />

【讨论】：

【解决方案14】：

您可以使用 javascript 来做到这一点。在你的form 标签中，onsubmit="javascript:this.getElementById("submitButton").disabled='true';"

【讨论】：

【解决方案15】：

这适用于常规的 html 按钮。

    <input id="Button1"
    onclick="this.disabled='true';" type="button"
    value="Submit" name="Button1"
    runat="server" onserverclick="Button1_Click">

在回发完成之前，该按钮处于禁用状态，防止双击。

【讨论】：

【解决方案16】：

<script type = "text/javascript">
function DisableButtons() {
    var inputs = document.getElementsByTagName("INPUT");
    for (var i in inputs) {
        if (inputs[i].type == "button" || inputs[i].type == "submit") {
            inputs[i].disabled = true;
        }
    }
}
window.onbeforeunload = DisableButtons;
</script>

【讨论】：