在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     //設定disabled屬性8     link.setAttribute("disabled", "disabled");
9 }

 2)啟用a元素;

 1 // 功能: 啟用一個a元素; 2 // 引數: 3 //     link: a元素物件; 4 function enableLink(link) {
 5      // 將id中的所有下劃線(_)全部替換為美元 ($)符號; 6      var postbackID = link.id.replace(/_/gi, "$");
 7      // 重新設定href 8      link.href = "javascript:__doPostBack('" + postbackID + "','')";
 9      // 刪除disabled屬性10      link.removeAttribute("disabled");
11  }

注意:LinkButton在的客戶端ID屬性預設使用下劃線(_)分隔符,在伺服器端則預設使用美元($)分隔符;所以呼叫__doPostBack()方法時,需要將它的id屬性轉換一下,否則不會觸發相關的伺服器端事件.

後記:

 參考了一下w3c標準,禁用a元素最後的辦法是將其href屬性刪除,從而轉換為文字元素;啟用時,則新增href元素.保留disabled屬性的邏輯時為了更好對應IE瀏覽器.

 1 // 功能: 禁用一個a元素; 2 // 引數: 3 //     link: a元素物件; 4 function disableLink(link) {
 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();" );