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.

possible duplicate of [How do I dynamically enable/disable links with jQuery?](http://stackoverflow.com/questions/3788946/how-do-i-dynamically-enable-disable-links-with-jquery) — Ashish, Jul 06 '15 at 14:10

score 126 · Answer 1 · edited Sep 05 '18 at 13:05

126

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);

edited Sep 05 '18 at 13:05

Vikrant

4,920
17
48
72

answered Feb 23 '11 at 00:10

David Tang

92,262
30
167
149

5

With 1.4.3 or later, you can shorten it a bit with `$('.my-link').bind('click',false);`. – user113716 Feb 23 '11 at 00:11
4

As of jQuery 1.7, `bind()` and `unbind()` have been replaced with `on()` and `off()`. See the [docs](http://api.jquery.com/unbind/) for more info. – Sir Celsius Aug 21 '14 at 14:57
1

[this](http://stackoverflow.com/a/17935158/2218697) post has **easiest way using bootstrap**, hope helps. – Shaiju T Oct 15 '16 at 16:25

Luciano Mammino · Answer 2 · 2012-07-25T22:58:43.243

32

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').

edited Jul 25 '12 at 22:58

answered Jul 25 '12 at 22:45

Luciano Mammino

798
8
23

1

I think this should actually be: if ($(this).attr('disabled')) { e.stopImmediatePropagation(); } – Jules Jun 14 '15 at 10:41
2

Also, to ensure that dynamically added anchors are also disabled, the full code should be: $("body").on("click", "a", function (e) { if ($(this).attr('disabled')) { e.stopImmediatePropagation(); } }); – Jules Jun 14 '15 at 10:53
1

(can't edit comment after 5 mins). I forgot to add: e.preventDefault(); – Jules Jun 14 '15 at 11:01

score 12 · Answer 3 · answered Feb 23 '11 at 00:12

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.

removing the `href` will also mess up SEO rankings. leaving the attribute and disabling it will make robots realise it is a link. — Sir Celsius, Aug 21 '14 at 14:55

score 8 · Answer 4 · edited Jul 31 '12 at 16:06

8

$('.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.

edited Jul 31 '12 at 16:06

user229044

232,980
40
330
338

answered Feb 23 '11 at 00:14

Neil

3,229
1
17
15

score 7 · Answer 5 · answered Dec 18 '12 at 02:02

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; }

answered Dec 18 '12 at 02:02

tiffon

5,040
25
34

But this can also disable any other work the link does. For example, the hover won't work. – m4n0 Sep 25 '20 at 08:00

score 4 · Answer 6 · edited Jan 07 '13 at 07:17

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;
}

score 2 · Answer 7 · answered May 13 '16 at 09:02

2

Append a class containing pointer-events:non

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


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

answered May 13 '16 at 09:02

Andrien Pecson

282
3
13

score 2 · Answer 8 · answered Feb 23 '11 at 00:18

2

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.

answered Feb 23 '11 at 00:18

wsanville

37,158
8
76
101

This is the first time I see somebody reference MSDN, W3C link please?! – pronebird Mar 24 '12 at 00:10
@Zappa, w3School is not related to W3C. W3C is www.w3.org – AaA Mar 07 '14 at 03:05

IT ppl · Answer 9 · 2012-11-20T07:36:06.783

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.

Thank you so much! You just saved me from having to edit 2400 chunks of text... or learn regexes (and who wants to do that, right?). — Kyle Carlson, Jul 21 '13 at 12:47
How can I set the link back to its default? suppose I disabled all the links with $(this).replaceWith($(this).text()); but how can I set it to its enabled default? — sasha, Nov 15 '13 at 13:24

score 0 · Answer 10 · answered Aug 20 '14 at 04:42

0

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

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

answered Aug 20 '14 at 04:42

Bradley Flood

10,233
3
46
43

score -3 · Answer 11 · edited Oct 31 '17 at 14:45

-3

Try:

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

edited Oct 31 '17 at 14:45

Mohammad Usman

37,952
20
92
95

answered Jun 18 '15 at 22:20

user670265

483
4
3

"disabled" is not available on links. Might work in IE, but not other browsers. – Rob Johnston Feb 22 '16 at 20:34

disable a hyperlink using jQuery

11 Answers11

Linked

Related