快捷導(dǎo)航

asp.net下按鈕點(diǎn)擊后禁用的實(shí)現(xiàn)代碼

更新時間：2010年09月28日 09:09:32 作者：

有時候為了不讓用戶連續(xù)的點(diǎn)擊某按鈕，我們會選擇將其在點(diǎn)擊后禁用。

一、讓按鈕在點(diǎn)擊后用腳本使其禁用：

 
<%@ 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 );//點(diǎn)擊后禁用 
} 
); 
} 
); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:Button ID="btnTest" Text="點(diǎn)擊后禁用" runat="server" OnClick="Test" /> 
</div> 
</form> 
</body> 
</html> 

然而事實(shí)很遺憾的告訴我們這種方式行不通：頁面根本不會回發(fā)。于是，我們不得不尋找其他方式。

復(fù)制代碼代碼如下:

 
<%@ 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();//禁用掉自身并調(diào)用真正觸發(fā)回發(fā)的按鈕的click事件 
} 
); 
} 
); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" value="點(diǎn)擊后禁用" id="btnTest" /> 
<asp:Button ID="btnTest2" Text="點(diǎn)擊后禁用" runat="server" OnClick="Test" style="display:none"/> 
</div> 
</form> 
</body> 
</html> 

這樣一來我們的目的達(dá)到了。最后再介紹一種方式：三、利用setTimeout實(shí)現(xiàn)

復(fù)制代碼代碼如下:

 
<%@ 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="點(diǎn)擊后禁用" runat="server" OnClick="Test"/> 
</div> 
</form> 
</body> 
</html> 

這樣不用引入輔助控件我們也實(shí)現(xiàn)了需求。
注：為了更好的觀察試驗效果，可以在按鈕的Click時間處理函數(shù)中Sleep幾秒。
當(dāng)然可以使用 jquery 的 unbind 與 bind 函數(shù)實(shí)現(xiàn)對它的click 事件移除或者添加操作.