禁用和啟用連結(a元素|LinkButton)的js方法
在Asp.net中,有時候需要禁用掉一個a連結元素.
在伺服器端,比較容易;只需要設定LinkButton的Enabled屬性即可.
那麼在客戶端,如何使用javascript來實現呢? 如果你想當然的認為,使用a.disabled=true就能實現,那就錯了.
正確的方法是:同時設定disabled屬性和href屬性:
1)禁用a元素;
1 // 功能: 禁用一個a元素;2 // 引數:3 // link: a元素物件;4 function disableLink(link) {5 //設定href屬性6 link.href = "javascript:void(0);";
7
9 }
2)啟用a元素;
5 // 將id中的所有下劃線(_)全部替換為美元 ($)符號; 6 var postbackID = link.id.replace(/_/gi, "$");
7 // 重新設定href 8 link.href = "javascript:__doPostBack('" + postbackID + "','')";
9
11 }
注意:LinkButton在的客戶端ID屬性預設使用下劃線(_)分隔符,在伺服器端則預設使用美元($)分隔符;所以呼叫__doPostBack()方法時,需要將它的id屬性轉換一下,否則不會觸發相關的伺服器端事件.
後記:
參考了一下w3c標準,禁用a元素最後的辦法是將其href屬性刪除,從而轉換為文字元素;啟用時,則新增href元素.保留disabled屬性的邏輯時為了更好對應IE瀏覽器.
5 //刪除href屬性,使其成為文字元素 6 link.removeAttribute("href");
7 //設定disabled屬性 8 link.setAttribute("disabled", "disabled");
9 }
10
11 // 功能: 啟用一個a元素;12 // 引數:13 // link: a元素物件;14 function enableLink(link) {
15 // 將id中的所有下劃線(_)全部替換為美元 ($)符號;16 var postbackID = link.id.replace(/_/gi, "$");
17 // 重新設定href18 link.setAttribute("href", "javascript:__doPostBack('" + postbackID + "','')") ;
19 // 刪除disabled屬性20 link.removeAttribute("disabled");
21 }
----------------------------------
原文是針對ASP.net頁面 實際在jsp中 上述方法也適應。
示例程式碼如下:
<a class="btn cx" href="javascript:querysubmit();" role="button" id="pre">查詢</a>
禁用:
var searchBtn = document.getElementById("pre");
searchBtn.removeAttribute("href");
searchBtn.setAttribute( "disabled", "disabled" );
啟用:
var searchBtn = document.getElementById("pre");
searchBtn.removeAttribute("disabled");
searchBtn.setAttribute( "href", "javascript:querysubmit();" );