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

时间:2011-03-04 04:17:45

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

我有一个ASP.NET按钮,我需要在用户单击它后禁用它以防止双击。提交完成后,必须再次启用它。任何人都可以帮我这个吗?

16 个答案:

答案 0 :(得分:34)

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

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

在后端,在click事件处理程序方法调用中,将此代码添加到结尾(最好是在finally块中)

myButton.Enabled = true;

答案 1 :(得分:31)

我找到了this,它有效:

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

答案 2 :(得分:15)

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

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>

要在验证成功后和,请禁用按钮,就像页面正在进行服务器回发一样。

答案 3 :(得分:7)

如果由于响应缓慢的服务器端代码而要防止双击,那么这样可以正常工作:

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

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

无需服务器端代码重新启用按钮!

答案 4 :(得分:3)

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

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

答案 5 :(得分:3)

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

答案 6 :(得分:3)

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

答案 7 :(得分:2)

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

答案 8 :(得分:2)

只需要为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"  />

更多详情:

LICENSE file at the time of copying

答案 9 :(得分:1)

使用jQuery:

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

答案 10 :(得分:1)

我想禁用按钮并调用回发,这样后面的代码在按钮被禁用后仍会运行。

这就是我如何附加代码:

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

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

btnProcess.Enabled = True

答案 11 :(得分:1)

试试这个,它对我有用

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

中调整延迟时间

答案 12 :(得分:1)

如果您使用的是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" />

答案 13 :(得分:0)

您可以使用javascript执行此操作。在form代码onsubmit="javascript:this.getElementById("submitButton").disabled='true';"

答案 14 :(得分:0)

这适用于常规的html按钮。

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

按钮被禁用,直到回发结束,防止双击。

答案 15 :(得分:0)

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