如何将按钮点击后禁用

时间：2010-08-26 来源：FrogTan

有时候为了不让用户连续的点击某按钮，我们会选择将其在点击后禁用。

一、让按钮在点击后用脚本使其禁用：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DisableButton.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function enableButton(flag) {
    $("#btnTest").attr("disabled", flag? "" : "disabled");
}
$(document).ready(
    function () {
        $("#btnTest").click(
            function () {
                enableButton( false );//点击后禁用
                            }
        );
     }
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
     <asp:Button ID="btnTest" Text="点击后禁用" runat="server" OnClick="Test" />
</div>
</form>
</body>
</html>

然而事实很遗憾的告诉我们这种方式行不通：页面根本不会回发。于是，我们不得不寻找其他方式。

二、让回发的按钮退居二线:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DisableButton.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function enableButton(flag) {
      $("#btnTest").attr("disabled", flag? "" : "disabled");
}
$(document).ready(
    function () {
        $("#btnTest").click(
           function () {
               enableButton(false);
               $("#btnTest2").click();//禁用掉自身并调用真正触发回发的按钮的click事件
              }
         );
    }
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="点击后禁用" id="btnTest" />
<asp:Button ID="btnTest2" Text="点击后禁用" runat="server" OnClick="Test" style="display:none"/>
</div>
</form>
</body>
</html>

这样一来我们的目的达到了。最后再介绍一种方式：三、利用setTimeout实现

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DisableButton.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function enableButton(flag) {
      $("#btnTest").attr("disabled", flag? "" : "disabled");
}
$(document).ready(
    function () {
        $("#btnTest").click(
            function () {
                setTimeout(function () {
                enableButton(false);
            },
            50);
        }
        );
    }
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnTest" Text="点击后禁用" runat="server" OnClick="Test"/>
</div>
</form>
</body>
</html>

这样不用引入辅助控件我们也实现了需求。

注：为了更好的观察试验效果，可以在按钮的Click时间处理函数中Sleep几秒。