How do you make an anchor link non-clickable or disabled

Question

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    lt a href    id  ThisLink  gt some text lt  a gt    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  lt a gt  tags

User · Answer

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

User · Answer

a   removeAttr  href     or     a   click function    return false     It depends on situation

User · Answer

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

User · Answer

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

User · Answer

Add a css class    disable a href      pointer-events  none      Add this jquery       ThisLink   addClass  disable a href

User · Answer

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

User · Answer

Try this      a   contents   unwrap

User · Answer

Simply in SASS     some class          styles           amp  active          pointer-events none

User · Answer

Create following  class in style sheet       ThisLink             pointer-events  none             cursor  default          Add this class to you link  dynamically as follow     lt a href    id  elemID  gt some text lt  a gt            or using jquery  lt script gt          elemID   addClass  ThisLink      lt  script gt

User · Answer

This is the method I used to disable Hope it helps       ThisLink   attr  href   javascript

User · Answer

lt a href  javascript void 0    gt some text lt  a gt

User · Answer

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

User · Answer

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

User · Answer

You could use the onclick event to disable the click action    lt a href    id  ThisLink  onclick  return false  gt some text lt  a gt    Or you could just use something other than an  lt a gt  tag

User · Answer

Just remove the href attribute from the anchor tag

User · Answer

I just realized what you were asking for I hope   Here s an ugly solution  var preventClick   false       ThisLink   click function e          this          css  cursor    default           css  text-decoration    none        if   preventClick              this  html   this  html       lalala               preventClick   true       return false

User · Answer

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

User · Answer

The easyest way   In your html    lt a id  foo  disabled  true  gt xxxxx lt a gt    In your js       foo   attr  disabled   false     If you use it as attribute works perfectly

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

Examples related to jquery