asp.net下按钮点击后禁用的实现代码

时间:2022-09-14 12:14:28

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

复制代码代码如下:


<%@ 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几秒。 
当然可以使用 jquery 的 unbind 与 bind 函数实现对它的click 事件移除或者添加操作.