How to enable or disable an anchor using jQuery

Question

User · Answer

a   click function                    alert  disabled                    return false

User · Answer

If you don t need it to behave as an anchor tag then I would prefer to replace it at all  For example if your anchor tag is like    lt a class  MyLink  href  http   www google com  gt  lt span gt My lt  span gt   lt strong gt Link lt  strong gt  lt  a gt    then using jquery you can do this when you need to display text instead of a link   var content       MyLink   text       or  html       MyLink   replaceWith   lt div gt     content     lt  div gt      So this way  we can simply replace anchor tag with a div tag  This is much easier  just 2 lines  and semantically correct as well  because we don t need a link now therefore should not have a link

User · Answer

I found an answer that I like much better here   Looks like this     document  ready function           a   click function                 this  fadeTo  fast    5  removeAttr  href                   Enabling would involve setting the href attribute    document  ready function           a   click function                 this  fadeIn  fast   attr  href    http   whatever com wherever html                   This gives you the appearance that the anchor element becomes normal text  and vice versa

User · Answer

It s as simple as return false   ex   jQuery  li a eq 0    click function       return false       or  jQuery   menu a   click function       return false

User · Answer

I think a nicer solution is to set disabled data attribute on and anchor an check for it on click  This way we can disable temporarily an anchor until e g  the javascript is finished with ajax call or some calculations  If we do not disable it  then we can quickly click it a few times  which is undesirable        a   live  click   function          var anchor     this        if  anchor data  disabled              return false             anchor data  disabled    disabled           ajax           url  url          data  data          cache  false          success  function  json                   when it s done  we enable the anchor again             anchor removeData  disabled                       error  function                      there was an error  enable the anchor             anchor removeData  disabled                           return false        I made a jsfiddle example  http   jsfiddle net wgZ59 76

User · Answer

a   click function event      event preventDefault          If this method is called  the default action of the event will not be triggered

User · Answer

For situations where you must put text or html content within an anchor tag  but you simply don t want any action to be taken at all when that element is clicked  like when you want a paginator link to be in the disabled state because it s the current page   simply cut out the href       lt a gt 3  current page  I m totally disabled   lt  a gt    The answer by  michael-meadows tipped me off to this  but his was still addressing scenarios where you still have to   are working with jQuery JS  In this case  if you have control over writing the html itself  simply x-ing the href tag is all you need to do  so the solution is a pure HTML one   Other solutions without jQuery finagling which keep the href require you to put a   in the href  but that causes the page to bounce to the top  and you just want it to be plain old disabled  Or leaving it empty  but depending on browser  that still does stuff like jump to the top  and  it is invalid HTML according to the IDEs  But apparently an a tag is totally valid HTML without an HREF   Lastly  you might say  Okay  why not just dump the a tag altogether than  Because often you can t  the a tag is used for styling purposes in the CSS framework or control you re using  like Bootstrap s paginator   http   twitter github io bootstrap components html pagination

User · Answer

To prevent an anchor from following the specified href  I would suggest using preventDefault        jQuery 1 7    function             a something   on  click   function  e            e preventDefault                    jQuery  lt  1 7   function             a something   click function  e            e preventDefault                    or          a something   bind  click   function  e            e preventDefault                  See   http   docs jquery com Events jQuery Event event preventDefault 28 29  Also see this previous question on SO   jQuery disable a link

User · Answer

divID   addClass  disabledAnchor      In css file   disabledAnchor a         pointer-events  none  important         cursor  default         color white

User · Answer

Selected Answer is not good   Use pointer-events CSS style   As Rashad Annara 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

Try the below lines       yourbuttonid   attr  disabled    disabled        yourbuttonid   removeAttr  href      Coz  Even if you disable  lt a gt  tag href will work so you must remove href also   When you want enable try below lines      yourbuttonid   removeAttr  disabled        yourbuttonid   attr  href     nav-panel

User · Answer

If you are trying to block all interaction with the page you might want to look at the jQuery BlockUI Plugin

User · Answer

The app I m currently working on does it with a CSS style in combination with javascript   a disabled   color gray      Then whenever I want to disable a link I call     thelink   addClass  disabled      Then  in the click handler for  thelink  a tag I always run a check first thing  if     thelink   hasClass  disabled    return

User · Answer

Disable or Enable any element with the disabled property      Disable      myAnchor   prop   disabled   true        Enable      myAnchor    prop   disabled   false

User · Answer

So with a combination of the responses above  I came up with this   a disabled   color   555555  cursor  default  text-decoration  none         yourClass   addClass  disabled   click function e   e preventDefault

User · Answer

You never really specified how you wanted them disabled  or what would cause the disabling   First  you want to figure out how to set the value to disabled  for that you would use JQuery s Attribute Functions  and have that function happen on an event  like a click  or the loading of the document

[jquery] How to enable or disable an anchor using jQuery?

Examples related to jquery

Examples related to html

Examples related to anchor