单击后如何禁用按钮以避免多次发布请求？答案

【问题标题】：How to disable button after click to avoid multiple post requests?单击后如何禁用按钮以避免多次发布请求？
【发布时间】：2012-12-13 10:49:00
【问题描述】：

我想在单击几秒钟后禁用服务器端 asp.net 按钮控件，然后触发服务器端事件。我正在尝试使用 setTimeout 但如果我使用 setTimeout 则永远不会触发服务器端事件。有人可以帮忙吗？

   <script type="text/javascript">
    function disableBtn(btnId, dspTxt) {
        var btn = document.getElementById(btnId);
        btn.value = dspTxt;
        setTimeout(btn.disabled = true,1000);
    }
</script>

【问题讨论】：

为什么需要在客户端禁用？您可以在 btn_Click 中禁用
我不想使用睡眠。我只想禁用它 2 秒并触发服务器端事件。似乎 disable=true 使服务器端代码无效？
也许这对你有帮助stackoverflow.com/questions/13825543/…
setTimeout 有什么特殊原因吗？您实际上想在这里实现什么？禁用服务器按钮而不通过单击另一个客户端/服务器控件进行回发？
setTimeout(function(){btn.disabled = true;},1000); setTimeout 必须调用一些函数

标签： javascript asp.net

【解决方案1】：

在表单上放置两个按钮：

<asp:Button ID="ButtonToDisable" runat="server" Text="Button" />
<asp:LinkButton ID="PostBackLinkButton" runat="server" onclick="PostBackLinkButton_Click"></asp:LinkButton>

第一个是 2 秒后禁用的按钮，第二个是执行回发的按钮。

接下来将这段代码放入page.cs：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            ClientScript.RegisterStartupScript(this.GetType(), "timer",
               "setTimeout(function(){" + Page.ClientScript.GetPostBackEventReference(PostBackLinkButton, String.Empty) + "},2000)", true);
        }
    }

    protected void PostBackLinkButton_Click(object sender, EventArgs e)
    {
        ButtonToDisable.Enabled = false;
        ButtonToDisable.Text = "Button is disabled!";
    }

现在只需运行页面并等待 2 秒，就会发生回发并禁用 PostBackLinkButton。

如果您不希望用户可以看到回发，请在更新面板中放置按钮。

【讨论】：

【解决方案2】：

使用 jQuery 怎么样？

$('#buttonId').attr("disabled", true);

或者在函数中

function disableBtn(btnId, dspTxt) {
  var button = $(btnId);
  button.attr("disabled", true);
  button.text(dspTxt);
}

http://www.w3schools.com/jsref/prop_select_disabled.asp

【讨论】：

我可以禁用该按钮。我想在禁用按钮 2 秒后触发服务器端事件（在此事件期间保持禁用状态）。

【解决方案3】：

如果我正确理解你需要这样的东西：

 var isClicked=false;
 $('.myButton').click(function (e) {
    e=e?e:window.event;
    if(!isClicked){
        if($.browser.msie){e.cancelBubble=true; e.returnValue=false;}
      else
        e.preventDefault();
    isClicked=true;   
    $(this).attr('disabled','disabled');
    setTimeout(function(){delayClick();},1000);
  }

});
function delayClick()
{
   $(this).removeAttr('disabled');
   $('.myButton').click();

}

【讨论】：