disable a hyperlink using jQuery

Question

lt a href  gohere aspx  class  my-link  gt Click me lt  a gt    I did       my-link   attr  disabled   true     but it didn t work  Is there an easy way to disable the hyperlink using jquery  Remove href  I would rather not fiddle with href  So if I can do it w o removing href  that would be great

User · Answer

my-link   click function e    e preventDefault           You could use       my-link   click function e    return false         But I don t like to use this myself as it is more cryptic  even though it is used extensively throughout much jQuery code

User · Answer

The pointer-events CSS property is a little lacking when it comes to support  caniuse com   but it s very succinct    my-link   pointer-events  none

User · Answer

This also works well  Is simple  lite  and doesn t require jQuery to be used    lt a href  javascript void 0   gt Link lt  a gt

User · Answer

The disabled attribute isn t valid on all HTML elements I believe  see the MSDN article  That and the proper value for disabled is simply  disabled   Your best approach is to bind a click function that returns false

User · Answer

Try     this  prop   disabled   true

User · Answer

Removing the href attribute definitely seems to the way to go  If for some reason you need it later  I would just store it in another attribute  e g       my-link   each function           this  attr  data-oldhref     this  attr  href           this  removeAttr  href          This is the only way to do it that will make the link appear disabled as well without writing custom CSS  Just binding a click handler to false will make the link appear like a normal link  but nothing will happen when clicking on it  which may be confusing to users  If you are going to go the click handler route  I would at least also  addClass  link-disabled   and write some CSS that makes links with that class appear like normal text

User · Answer

You can bind a click handler that returns false       my-link   click function     return false       To re-enable it again  unbind the handler       my-link   unbind  click      Note that disabled doesn t work because it is designed for form inputs only     jQuery has anticipated this already  providing a shortcut as of jQuery 1 4 3       my-link   bind  click   false     And to unbind   re-enable       my-link   unbind  click   false

User · Answer

Append a class containing pointer-events non   active a    css text-decoration  underline  background-color   fff  pointer-events  none       this  addClass  active

User · Answer

I know it s an old question but it seems unsolved still  Follows my solution     Simply add this global handler      a   click function          return    this  attr  disabled      false   true        Here s a quick demo  http   jsbin com akihik 3  you can even add a bit of css to give a different style to all the links with the disabled attribute   e g  a disabled        color  grey       Anyway it seems that the disabled attribute is not valid for a tags  If you prefer to follow the w3c specs you can easily adopt an html5 compliant data-disabled attribute  In this case you have to modify the previous snippet and use   this  data  disabled

User · Answer

function EnableHyperLink id                    id  attr  onclick    Pagination      id           onclick event which u                  id  addClass  enable-link                    id  removeClass  disable-link               function DisableHyperLink id                    id  addClass  disable-link                    id  removeClass  enable-link                    id  removeAttr  onclick            disable-link       text-decoration  none  important      color  black  important      cursor  default     enable-link       text-decoration  underline  important      color   075798  important      cursor  pointer  important

User · Answer

Below will replace the link with it s text     a   each function            this  replaceWith   this  text           Edit    Above given code will work with hyperlinks with text only  it will not work with images  When we ll try it with image link it won t show any image   To make this code compatible with image links following will work fine     below given function will replace links with images i e  for image links    a img   each function          var image   this src      var img       lt img gt      src  image           this  parent   replaceWith img           This piece of code will replace links with its text i e  for text links    a   each function            this  replaceWith   this  text           explanation   In above given code snippets  in first snippet we are replacing all the image links with it s images only  After that we are replacing text links with it s text

[jquery] disable a hyperlink using jQuery

Examples related to jquery

Examples related to disable-link