Disable HTML a links in different browser



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 butnot for links.

Workaround

We, probably, need to define a CSS class for pointer-events: none but what if wereuse disabled attribute instead of a CSS class? Strictly speakingdisabled is not supported for <a> but browsers won't complain forunknown attributes. Using disabled attribute IE will ignorepointer-events but it will honor IE specific disabled attribute; other CSS complaint browsers will ignoreunknown 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 returnundefined when the attribute is not set) but is() is much more clear (thanks to Dave Stewart for this tip). Please note here I'm usingdisabled 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 withaddClass() 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 itmay 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 adisabled 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;}