禁用和启用链接(a元素|LinkButton)的js方法

http://www.cnblogs.com/beiguren/archive/2010/05/24/1742926.html

在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        //  重新设置href
18        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();" );