jQuery: Disable hyperlink
The simplest way to disable/enable a link by using jQuery is:
function DisableLinks(links) {
links.attr('disabled', 'true');
}
function EnableLinks(links) {
links.removeAttr('disabled');
// or links.attr('disabled', 'false');
}
However, the ‘disabled‘-attribute is supported only by IE, and the given example won’t work, for instance, in Firefox.
To circumvent this problem I’d like to suggest the following code:
<head>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<style type="text/css">
.disabledLink
{
color: Gray;
text-decoration: none;
}
</style>
<script type="text/javascript">
function DisableLinks(links) {
links.each(
function(index, linkDomElement) {
var link = $(linkDomElement);
// get the 'href' and 'onclick' attribute values
var linkHRef = link.attr('href');
var linkOnClick = link.attr('onclick');
// set the dummy attribute values
link.attr('href', '#').attr('onclick', 'return false;');
// add a temporary attribute to keep the original 'href' value
if (linkHRef != undefined)
link.attr('tmphref', linkHRef);
// add a temporary attribute to keep the original 'onclick' value
if (linkOnClick != undefined)
link.attr('tmponclick', linkOnClick);
// add the class decorating disabled links
link.addClass('disabledLink');
});
}
function EnableLinks(links) {
links.each(
function(index, linkDomElement) {
var link = $(linkDomElement);
// get the original values of 'href' and 'onclick' attributes from temporary attributes
var originalLinkHRef = link.attr('tmphref');
var originalLinkOnClick = link.attr('tmponclick');
// restore the original 'href' value
if (originalLinkHRef != undefined)
link.attr('href', originalLinkHRef);
// restore the original 'onclick' value
if (originalLinkOnClick != undefined)
link.attr('onclick', originalLinkOnClick);
// remove temporary attributes
link.removeAttr('tmphref').removeAttr('tmponclick');
// remove the class decorating disabled links
link.removeClass('disabledLink');
});
}
</script>
</head>
The methods DisableLinks and EnableLinks work successfully in different browsers. The css-class disabledLink allows to define the style of disabled link.
Below the sample of usage:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="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>
// the head is the same as it was in previous listing
</head>
<body>
<a id="disableLinks" href="#" onclick="DisableLinks($('#linkDiv a')); $('#enableLinks').show(); $('#disableLinks').hide(); return false;">Disable the rest of links</a>
<a id="enableLinks" style="display:none" href="#" onclick="EnableLinks($('#linkDiv a')); $('#enableLinks').hide(); $('#disableLinks').show(); return false;">Enable the rest of links</a>
<br />
<br />
<br />
<div id="linkDiv">
<a href="http://google.com" onclick="alert('Transfer to www.google.com');">Goooogle</a>
<br />
<a href="#" onclick="alert('Hello!'); return false;">Hello, alert!</a>
<br />
</div>
</body>
</html>
 Links are enabled |
 Links are disabled |