disable a hyperlink using jQuery

Question

Click me

I did

$(\'.my-link\').attr(\'disabled\', true);

Answer 1

Append a class containing pointer-events:non

.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}


$(this).addClass('active');

Answer 2

Try:

$(this).prop( "disabled", true );

Answer 3

The pointer-events CSS property is a little lacking when it comes to support (caniuse.com), but it's very succinct:

.my-link { pointer-events: none; } 

Answer 4

Removing the href attribute definitely seems to the way to go. If for some reason you need it later, I would just store it in another attribute, e.g.

$(".my-link").each(function() {
    $(this).attr("data-oldhref", $(this).attr("href"));
    $(this).removeAttr("href");
});

This is the only way to do it that will make the link appear disabled as well without writing custom CSS. Just binding a click handler to false will make the link appear like a normal link, but nothing will happen when clicking on it, which may be confusing to users. If you are going to go the click handler route, I would at least also .addClass("link-disabled") and write some CSS that makes links with that class appear like normal text.

Answer 5

This also works well. Is simple, lite, and doesn't require jQuery to be used.

<a href="javascript:void(0)">Link</a>