jQuery disable a link

Question

Anyone know how to disable a link in jquery WITHOUT using return false    Specifically  what I m trying to do is disable the link of an item  performing a click on it using jquery which triggers some stuff  then re-enabling that link so that if it s clicked again it works as default   Thanks  Dave  UPDATE Here s the code  What it needs to do after the  expanded class has been applied is to re-enable the disabled link      ul li   click function e        e preventDefault           ul   addClass  expanded           ul expanded   fadeIn 300         return false

User · Answer

For others who came here via google like me - here's another approach:

css:
.disabled {
  color: grey; // ...whatever
}

jQuery:
$('#myLink').click(function (e) {
  e.preventDefault();
  if ($(this).hasClass('disabled'))
    return false; // Do something else in here if required
  else
    window.location.href = $(this).attr('href');
});

// Elsewhere in your code
if (disabledCondition == true)
  $('#myLink').addClass('disabled')
else
  $('#myLink').removeClass('disabled')

Remember: not only this is a css class

class="buttonstyle"

but also these two

class="buttonstyle disabled"

so you can easily add and remove further classes with jQuery. No need to touch href...

I love jQuery! ;-)

User · Answer

I always use this in jQuery for disabling links     form a   attr  disabled    disabled

User · Answer

I know this isn t with jQuery but you can disable a link with some simple css   a disabled      z-index  -1      the HTML would look like   lt a disabled  disabled  href   start  gt Take Survey lt  a gt

User · Answer

html link example           lt  -- boostrap button   fontawesome icon -- gt           lt a class  quot btn btn-primary quot  id  quot BT Download quot  target  quot  blank quot  href  quot DownloadDoc Id 32 quot  gt           lt i class  quot icon-file-text icon-large quot  gt  lt  i gt          Download Document          lt  a gt   use this in jQuery         BT Download   attr  disabled  true    add this to css       a disabled  quot disabled quot             pointer-events  none

User · Answer

you can just hide and show the link as you like    link  hide      link  show

User · Answer

If you go the href route  you can save it   To disable      a   each function          this  data  href     this  attr  href    removeAttr  href          Then re-enable using      a   each function          this  attr  href     this  data  href           In one case I had to do it this way because the click events were already bound somewhere else and I had no control over it

User · Answer

Try this      a   removeAttr  href      EDIT-  From your updated code    var location      link1   attr  href         link1   removeAttr  href        ul   addClass  expanded        ul expanded   fadeIn 300        link1   attr  href   location

User · Answer

You can remove click for link by following       link-id   unbind  click      You can re-enable link by followings       link-id   bind  click      You can not use  disabled   property for links

User · Answer

Here is an alternate css jQuery solution that I prefer for its terseness and minimized scripting   css   a disabled     opacity  0 5    pointer-events  none    cursor  default      jQuery       disableAfterClick   click function  e         this  addClass  disabled

User · Answer

Just use    a   prop  disabled   true    This will really disable de link element   Needs to be prop  disabled   true   Don t use attr  disabled   true

User · Answer

unbind   was deprecated in jQuery 3  use the off   method instead      a   off  click

User · Answer

Just trigger stuff  set some flag  return false  If flag is set - do nothing

User · Answer

My fav in  checkout to edit an item and prevent -wild wild west clicks to anywhere- while in a checkout  functions     a   click function e        var     this  attr  disabled        if  var      disabled             e preventDefault                So if i want that all external links in a second action toolbar should be disabled while in the  edit-mode  as described above  i ll add in the edit function      actionToolbar  external   attr  disabled   true     Link example after fire    lt a href  http   goo gl  target  elsewhere  class  external  disabled  disabled  gt Google lt  a gt    And now you CAN use disabled property for links  Cheers

User · Answer

myLink   click function e        e preventDefault          do other stuff when a click happens       That will prevent the default behaviour of a hyperlink  which is to visit the specified href   From the jQuery tutorial      For click and most other events  you   can prevent the default behaviour -   here  following the link to jquery com   - by calling event preventDefault   in the event handler   If you want to preventDefault   only if a certain condition is fulfilled  something is hidden for instance   you could test the visibility of your ul with the class expanded  If it is visible  i e  not hidden  the link should fire as normal  as the if statement will not be entered  and thus the default behaviour will not be prevented      ul li   click function e        if    ul expanded   is   hidden              e preventDefault               ul   addClass  expanded               ul expanded   fadeIn 300

User · Answer

This works for links that have the onclick attribute set inline   This also allows you to later remove the  return false  in order to enable it             disable all links matching class             yourLinkClass   each function index                var link     this               var OnClickValue   link attr  onclick                link attr  onclick    return false      OnClickValue                          enable all edit links             yourLinkClass   each function  index                var link     this               var OnClickValue   link attr  onclick                link attr  onclick   OnClickValue replace  return false

User · Answer

Just set preventDefault and return false        your-identifier   click function e            e preventDefault            return false           This will be disabled link but still  you will see a clickable icon hand  icon  You can remove that too with below     your-identifier   css  cursor    auto

User · Answer

You should find you answer here   Thanks  Will and  Matt for this elegant solution   jQuery   path  to  your a   each function        var  t   jQuery this        t after  t text          t remove

[jquery] jQuery disable a link

Examples related to jquery

Examples related to hyperlink