disable a hyperlink using jQuery

Question

<a href="gohere.aspx" class="my-link">Click me</a>

I did

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

but it didn't work

Is there an easy way to disable the hyperlink using jquery? Remove href? I would rather not fiddle with href. So if I can do it w/o removing href, that would be great.

Answer 1

You can bind a click handler that returns false:

$('.my-link').click(function () {return false;});

To re-enable it again, unbind the handler:

$('.my-link').unbind('click');

Note that disabled doesn't work because it is designed for form inputs only.

---

jQuery has anticipated this already, providing a shortcut as of jQuery 1.4.3:

$('.my-link').bind('click', false);

And to unbind / re-enable:

$('.my-link').unbind('click', false);

Answer 2

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 3

$('.my-link').click(function(e) { e.preventDefault(); }); 

You could use:

$('.my-link').click(function(e) { return false; }); 

But I don't like to use this myself as it is more cryptic, even though it is used extensively throughout much jQuery code.

Answer 4

The disabled attribute isn't valid on all HTML elements I believe, see the MSDN article. That and the proper value for disabled is simply "disabled". Your best approach is to bind a click function that returns false.

Answer 5

I know it's an old question but it seems unsolved still. Follows my solution...

Simply add this global handler:

$('a').click(function()
{
     return ($(this).attr('disabled')) ? false : true;
});

Here's a quick demo: http://jsbin.com/akihik/3

you can even add a bit of css to give a different style to all the links with the disabled attribute.

e.g

a[disabled]
{
    color: grey; 
}

Anyway it seems that the disabled attribute is not valid for a tags. If you prefer to follow the w3c specs you can easily adopt an html5 compliant data-disabled attribute. In this case you have to modify the previous snippet and use $(this).data('disabled').

Answer 6

Below will replace the link with it's text

$('a').each(function () {
    $(this).replaceWith($(this).text());
});

Edit :

Above given code will work with hyperlinks with text only, it will not work with images. When we'll try it with image link it won't show any image.

To make this code compatible with image links following will work fine

// below given function will replace links with images i.e. for image links
$('a img').each(function () {
    var image = this.src;
    var img = $('<img>', { src: image });
    $(this).parent().replaceWith(img);
});

// This piece of code will replace links with its text i.e. for text links
$('a').each(function () {
    $(this).replaceWith($(this).text());
});

explanation : In above given code snippets, in first snippet we are replacing all the image links with it's images only. After that we are replacing text links with it's text.

Answer 7

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 8

function EnableHyperLink(id) {
        $('#' + id).attr('onclick', 'Pagination("' + id + '")');//onclick event which u 
        $('#' + id).addClass('enable-link');
        $('#' + id).removeClass('disable-link');
    }

    function DisableHyperLink(id) {
        $('#' + id).addClass('disable-link');
        $('#' + id).removeClass('enable-link');
        $('#' + id).removeAttr('onclick');
    }

.disable-link
{
    text-decoration: none !important;
    color: black !important;
    cursor: default;
}
.enable-link
{
    text-decoration: underline !important;
    color: #075798 !important;
    cursor: pointer !important;
}

Answer 9

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

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

Answer 10

Try:

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

Answer 11

Append a class containing pointer-events:non

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


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