jQuery disable link elements with prop or attr

Question

I'm using jQuery to disable hyperlinks if the user isn't allowed to click on them.

The documentation(http://api.jquery.com/attr/) says:

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

I assume form elements are <input ...> elements so not links (<a>)

And that's why .prop('disabled', true) doesn't work, while .attr('disabled', 'disabled') does. However, is it supposed to work? Is there a specification which say that links can be disabled, in which case clicking on them won't have any action? - or is it just something few browsers implement because they're being nice?

If disabled isn't actually meant to be on links, is there any other easy way to forbid the user clicking on the link, or should I just remove and reattach the href attribute?

Answer 1

According to the specification at the MDN there is no attribute disabled allowed.

If you want a user to prevent clicking the link you can do it in serveral ways:

$('a').on('click', function(event){
    event.preventDefault(); //prevent the default behaviour of the Link (e.g. redirecting to another page)
});

Or

$('a').removeAttr('href'); //The link is not clickable anymore

Whereas the first Option will leave the link as it is, the second option will change the look of the link, as you can see in the demo. When using the second option you could save the origin-href to be able to re-attach it later.

Demo