You can't disable a link (in a portable way). You can use one of these techniques (each one with its own benefits and disadvantages).
CSS way
This should be the right way to do it when most of browsers will support it:
a.disabled {
pointer-events: none;
}
Actually (2015) it's well supported only by Chrome, FireFox and Opera (only latest versions). Internet Explorer started to support this from version 11 but not for links.
Workaround
We, probably, need to define a CSS class for pointer-events: none
but what if we reuse disabled
attribute instead of a CSS class? Strictly speaking disabled
is not supported for <a>
but browsers won't complain for unknown attributes. Using disabled
attribute IE will ignore pointer-events
but it will honor IE specific disabled
attribute; other CSS complaint browsers will ignore unknown disabled
attribute and honor pointer-events
. Easier to write than to explain:
a[disabled] {
pointer-events: none;
}
Intercept clicks
Use a href
to a JavaScript function, check for the condition (or the disabled attribute itself) and do nothing in case.
$("td > a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
To disable links do this:
$("td > a").attr("disabled", "disabled");
To re-enable them:
$("td > a").removeAttr("disabled");
If you want instead of .is("[disabled]")
you may use .attr("disabled") != undefined
(jQuery 1.6+ will always return undefined
when the attribute is not set) but is()
is much more clear (thanks to Dave Stewart for this tip). Please note here I'm using disabled
attribute in a non-standard way, if you care about this then replace attribute with a class and replace .is("[disabled]")
with .hasClass("disabled")
(adding and removing with addClass()
and removeClass()
).
Clear the link
Clear the href
attribute. With this code you do not add an event handler but you change the link itself. Use this code to disable links:
$("td > a").each(function() {
this.data("href", this.attr("href"))
.attr("href", "javascript:void(0)")
.attr("disabled", "disabled");
});
And this one to re-enable them:
$("td > a").each(function() {
this.attr("href", this.data("href")).removeAttr("disabled");
});
Personally I do not like this solution very much (if you do not have to do more with disabled links) but it may be more compatible because of various way to follow a link.
Fake click handler
Add/remove an onclick
function where you return false
, link won't be followed. To disable links:
$("td > a").attr("disabled", "disabled").on("click", function() {
return false;
});
To re-enable them:
$("td > a").removeAttr("disabled").off("click");
I do not think there is a reason to prefer this solution instead of the first one.
Styling
Styling is even more simple, whatever solution you're using to disable the link we did add a disabled
attribute so you can use following CSS rule:
a[disabled] {
color: gray;
}
If you're using a class instead of attribute:
a.disabled {
color: gray;
}