asp.net下按鈕點擊后禁用的實現代碼
更新時間:2010年09月28日 09:09:32 作者:
有時候為了不讓用戶連續(xù)的點擊某按鈕,我們會選擇將其在點擊后禁用。
一、讓按鈕在點擊后用腳本使其禁用:
<%@ 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>
然而事實很遺憾的告訴我們這種方式行不通:頁面根本不會回發(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();//禁用掉自身并調用真正觸發(fā)回發(fā)的按鈕的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 事件移除或者添加操作.
復制代碼 代碼如下:
<%@ 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>
然而事實很遺憾的告訴我們這種方式行不通:頁面根本不會回發(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();//禁用掉自身并調用真正觸發(fā)回發(fā)的按鈕的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 事件移除或者添加操作.
相關文章
Asp.Net Core利用xUnit進行主機級別的網絡集成測試詳解
這篇文章主要給大家介紹了關于Asp.Net Core利用xUnit進行主機級別的網絡集成測試的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們來一起看看吧2018-12-12ASP.NET 4中的可擴展輸出緩存(可以緩存頁面/控件等)
ASP.NET 1.0引入輸出緩存的概念,這使得開發(fā)者可以緩存頁面、控件、控制器以及HTTP響應的輸出到內存中,接下來詳細介紹,感興趣的朋友可以了解下2013-01-01.net 中的 StringBuilder 和 TextWriter 區(qū)別詳解
這篇文章主要介紹了.net 中的 StringBuilder 和 TextWriter 區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-09-09微信公眾平臺開發(fā)之發(fā)送文本消息.Net代碼解析
這篇文章主要為大家詳細解析了微信公眾平臺開發(fā)之發(fā)送文本消息.Net代碼,感興趣的小伙伴們可以參考一下2016-06-06asp.net基于替換模版頁的形式生成靜態(tài)頁的方法
這篇文章主要介紹了asp.net基于替換模版頁的形式生成靜態(tài)頁的方法,涉及asp.net模板的設置、變量替換、配置文件設置與讀取、以及文件夾與靜態(tài)文件的創(chuàng)建等技巧,需要的朋友可以參考下2016-07-07