jQuery - disable and enable an anchor tag based on condition

Question

On page load, I am checking to see if a person is registered. If he is then, I will enable a link otherwise disable the link.

I tried the following , but it doesnt work.

var status = $('#status');
if (status == 'Registered'){
    $('#addlink').data('disabled');
} 
else {

}

Please refer : http://stackoverflow.com/questions/10996435/disable-anchor-tag-using-jquery and http://stackoverflow.com/questions/1164635/how-to-enable-or-disable-an-anchor-using-jquery Hope it helps. — Gyan, Sep 25 '13 at 13:33
`status` is a jQuery object, it will never evaluate to `'Registered'` — tikider, Sep 25 '13 at 13:34

score 7 · Accepted Answer · answered Feb 17 '17 at 15:38

7

An alternative based on CSS would be

$('#addlink').css('pointer-events', 'none');

CanIUse reports a 94% support of this feature as of early 2017.

answered Feb 17 '17 at 15:38

patb

1,688
1
17
21

score 4 · Answer 2 · answered Sep 25 '13 at 13:32

4

use event.preventDefault to prevent anchor tag to work.

anchor tag doesn't disable on adding attribute disabled

var status = $('#status').text(); // get text value if it's is span/div/p etc
if (status == 'Registered') {
    $('#addlink').click(function (e) {
        e.preventDefault();
    });
}

answered Sep 25 '13 at 13:32

Tushar Gupta - curioustushar

58,085
24
103
107

1

An instanceof jQuery will never equal string "Registered". P.S. I didn't downvote. – rink.attendant.6 Sep 25 '13 at 13:35
1

Didn't downvote and I even got one with no reason but `status` is a jQuery object. – gdoron Sep 25 '13 at 13:35
1

i guess he didnt like the position of the click event – Hussein Nazzal Sep 25 '13 at 13:36
ps +1 but please put the click event first then do the if statment and create var on click (or just assign a value there) – Hussein Nazzal Sep 25 '13 at 13:37
@HusseinNazzal OP is checking it on page load so we don't click event. – Tushar Gupta - curioustushar Sep 25 '13 at 13:38
still better to do it on click event ! save the 1byte of memory by that .. (generally dont assign stuff that you dont need untill you need them ) and makes it easy when you manipulate the anchor tag on run time ;) – Hussein Nazzal Sep 25 '13 at 13:40

Anil kumar · Answer 3 · 2013-09-25T14:01:15.857

2

Try this, if user is register then enable the link by adding href, if not then disable by removing the href attribute.

Just set the status to some string before executing this code.

var href = $('#addlink').attr('href');
if(status == 'Registered'){
    $('#addlink').attr('href', href);
} else{
    $('#addlink').removeAttr('href');
}

Check here.

edited Sep 25 '13 at 14:01

answered Sep 25 '13 at 13:32

Anil kumar

4,107
1
21
36

4

i dont think this is the best way to do it ... preventing default will work better – Hussein Nazzal Sep 25 '13 at 13:35
actually you need to set 'status' to some string basically if refers to object here, and one more thing i want to say here is there is no need to prevent the default action since in not logged in case we are just removing the href attribute so there will be no action takes place even when you click on it – Anil kumar Sep 25 '13 at 13:39

score 1 · Answer 4 · edited Sep 25 '13 at 15:26

If you really want to remove the link you can use jquery unwrap method.

$("yourlinkselector").contents().unwrap();

This will remove the link. To add it back again you might have to put the link text into a span, give it a name and use .wrap to wrap it around your content.

Working example can be found here: http://jsfiddle.net/Elak/hrvPj/2/

// remove the link
$(".link").contents().unwrap().wrap("<span class='oldLink'></span>")

// add the link again and remove the temp span
$(".oldLink").contents().unwrap().wrap("<a href='#'></a>");

score -1 · Answer 5 · answered Sep 25 '13 at 14:09

Why don't you use the javascript:void(0) ?

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

like

var href = 'javascript:void(0)';

var status = $('#status').val();  // ??
if (status == 'Registered'){
    href = 'available link';
}

$('#addlink').attr('href',href);

Praveen · Answer 6 · 2013-09-25T13:40:25.600

-2

var status = $('#status').val(); //Not sure if it is a value/text
$('#addlink').on('click', function (e) {
    if (status == 'Registered') {
        e.preventDefault(); // prevent the default action of anchor tag
        return false;
    }
});

edited Sep 25 '13 at 13:40

answered Sep 25 '13 at 13:32

Praveen

55,303
33
133
164

3

[`HTMLAnchorElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLAnchorElement) doesn't have a property called "disabled". – rink.attendant.6 Sep 25 '13 at 13:33
@rink.attendant.6 Thanks for letting me to know. I have updated the code. – Praveen Sep 25 '13 at 13:41
You're preventing the default action, why return a boolean FALSE? – rink.attendant.6 Sep 25 '13 at 13:42
1

And the reason for @rink comment can be found here: http://stackoverflow.com/a/10729215/601179 – gdoron Sep 25 '13 at 13:43
I have it working as follows using the attribute disabled: var status = $('#status').text(); if (status == 'Registered') { $('#addLink').attr("disabled",true); } else{ $('#addLink').attr("disabled",false); } – Mary Sep 25 '13 at 13:58
@Mary Glad to know that you have fixed. But @rink posted that HTML a tag will not support `disabled` attribute. Are you sure it worked as expected? – Praveen Sep 25 '13 at 14:01
I believe there is an attribute called "disabled". We could also use prop. I am not sure which of the two to use, though- prop or attribute as both seem to be working the same. – Mary Sep 25 '13 at 14:14
I am wonderign the reason it works is because, I have a css class on the anchor tag. As it seems that the disabled attribute applies to style sheet links. Perhaps I do have to use the preventDefault method, as I am not sure how my solution og using the disaled attribute would work on different browsers and versions – Mary Sep 25 '13 at 14:21

jQuery - disable and enable an anchor tag based on condition

6 Answers6

Linked