[jquery] How do you make an anchor link non-clickable or disabled?

I have an anchor link that I want to disable once the user clicks on it. Or, remove the anchor tag from around the text, but definitely keep the text.

<a href='' id='ThisLink'>some text</a>

I can do this easily with a button by adding .attr("disabled", "disabled");
I successfully added the disabled property, but the link was still clickable.
I don't really care if the text is underlined or not.

Any clue?

When you click on the wrong musician, it should just add "Wrong" and then become unclickable.
When you click and you are correct, it should add "Awesome" and then disable all <a> tags.

Jason MacDonald comments worked for me, tested in Chrome, Mozila and IE.

Added gray color to show disable effect.

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery was selecting only first element in the anchor list, added meta character (*) to select and disable all element with id #ThisLink.

$("#ThisLink*").addClass("disable_a_href"); 

Bootstrap provide us with .disabled class. Please use it.

But .disabled class only works when the 'a' tag already has class 'btn'. It doesn' t work on any old 'a' tag. The btn class may not be appropriate in some context as it has style connotations. Under the covers, the .disabled class sets pointer-events to none, so you can make CSS to do the same thing as Saroj Aryal and Vitrilo have sugested. (Thank you, Les Nightingill for this advice).

You could use the onclick event to disable the click action:

<a href='' id='ThisLink' onclick='return false'>some text</a>

Or you could just use something other than an <a> tag.

Create following class in style sheet :

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

Add this class to you link dynamically as follow.

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

Add a css class:

.disable_a_href{
    pointer-events: none;
}

Add this jquery:

$("#ThisLink").addClass("disable_a_href"); 

Write this a single line of jQuery Code

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

if you want to write in css file

.hyperlink{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

This is the method I used to disable.Hope it helps.

$("#ThisLink").attr("href","javascript:;");

The easyest way

In your html:

<a id="foo" disabled="true">xxxxx<a>

In your js:

$('#foo').attr("disabled", false);

If you use it as attribute works perfectly

$('a').removeAttr('href')

or

$('a').click(function(){ return false})

It depends on situation

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

This would be another way to do this, the handler with return false, which will disable the link, will be added after one click.

Try this:

$('a').contents().unwrap();

The cleanest method would be to add a class with pointer-events:none when you want to disable a click. It would function like a normal label.

.disableClick{
    pointer-events: none;
}

Just remove the href attribute from the anchor tag.

The best way is to prevent the default action. In the case of anchor tag, the default behavior is redirecting to href specified address.

So following javascript works best in the situation:

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

Use pointer-events CSS style. (as Jason MacDonald suggested)

See MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events. Its supported in most browsers.

Simple adding "disabled" attribute to anchor will do the job if you have global CSS rule like following:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

Simply in SASS:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}