How do I disable a href link in JavaScript

Question

I have a tag  lt a href     gt  Previous  lt  a gt  1 2 3 4  lt a href     gt  Next  lt  a gt  and in some conditions I want this tag to be completely disabled   Code from comments  this is how the link is generated   if  n index    n pages       a   a   lt li gt  lt a href     onclick  javascript paginateAjaxPage    n index 1       stype      gt  gt  lt  a gt  lt  li gt  lt li gt  lt a href     onclick  javascript paginateAjaxPage   n pages     stype       gt  gt  gt  lt  a gt  lt  li gt     else      a   a   lt li gt  lt a style  cursor  pointer   onclick  return false   gt  gt  lt  a gt  lt  li gt  lt li gt  lt a style  cursor  pointer   onclick  return false   gt  gt  gt  lt  a gt  lt  li gt     a   a   lt  ul gt  lt  div gt

User · Answer

MDN recommends element removeAttribute attrName   over setting the attribute to null  or some other value  when you want to disable it  In this case it would be element removeAttribute  href     https   developer mozilla org en-US docs Web API Element removeAttribute

User · Answer

0  you better remember that Some browsers  quot jump quot  if you have a link and  quot   quot  href  So the best way would be a custom JavaScript 1  If you after the custom JavaScript  here it is   lt a href  quot   quot  onclick  quot DoSomething    return false  quot  gt Link lt  a gt    The  quot return false quot  prevents the link from actually being followed   2  You may consider avoid using following  lt a href  quot javascript void 0   quot  onclick  quot DoSomething    quot  gt Link lt  a gt   or    lt a href  quot javascript   quot  onclick  quot DoSomething    quot  gt Link lt  a gt   Because the javascript pseudo-protocol can put the page into a waiting state in some browsers  which can have unexpected consequences  IE6 is known for it  But If you don t care about IE6  and you are testing everything - it may be a good solution  3  If you already have jQuery and bootstrap in your project  you can look into using them like so      one-click   on  quot click quot   function  e          this   addClass  disabled         where  disabled class coming form bootstrap  Qupte form bootstrap site  here   Link functionality caveat The  disabled class uses pointer-events  none to try to disable the link functionality of s  but that CSS property is not yet standardized  In addition  even in browsers that do support pointer-events  none  keyboard navigation remains unaffected  meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links  So to be safe  add a tabindex  quot -1 quot  attribute on these links  to prevent them from receiving keyboard focus  and use custom JavaScript to disable their functionality   and the custom JavaScript was shown in section 1

User · Answer

Instead of void you can also use    lt a href  javascript    gt this link is disabled lt  a gt

User · Answer

Another method to disable link element removeAttribute  href     anchor tag without href would react as disabled plain text  lt a gt  w o href  lt  a gt   instead of  lt a href  quot   quot  gt  with href  lt  a gt  see jsFiddel hope this is heplful

User · Answer

This is possible  too    lt a href  javascript void 0   onclick  myfunction    gt    Link doesn t go anywhere by your function will be executed

User · Answer

Thank you All     My issue solved by below code     lt a href  javascript void 0   gt   gt  gt  gt   lt  a gt

User · Answer

I had a similar need  but my motivation was to prevent the link from being double-clicked   I accomplished it using jQuery     document  ready function             myLink   on  click   doSubmit        var doSubmit   function             myLink   off  click           do things here      The HTML looks like this    lt a href  javascript  void 0    id  myLink  gt click here lt  a gt

User · Answer

The easiest way to disable a link is simply not to show it   Run this function whenever you want to test if your condition is met to hide the Previous button  replace if  true  with your condition    var testHideNav   function         var aTags   document getElementsByTagName  a            atl   aTags length          i       for  i   0  i  lt  atl  i              if  aTags i  innerText     Previous                 if  true       your condition to disable previous                 aTags i  style visibility    hidden                 else                   aTags i  style visibility    visible                           else if  aTags i  innerText     Next                 if  false       your condition to disable next                 aTags i  style visibility    hidden                 else                   aTags i  style visibility    visible                                      Then run testHideNav   whenever you need to make the check if your condition has changed

User · Answer

Use a span and a javascript onclick instead  Some browsers  jump  if you have a link and     href

User · Answer

you can deactivate all links in a page with this style class   a       pointer-events none      now of course the trick is deactivate the links only when you need to  this is how to do it   use an empty A class  like this   a      then when you want to deactivate the links  do this       GetStyleClass  a   pointerEvents    none       function GetStyleClass className               for  var i 0  i lt  document styleSheets length  i                var styleSheet   document styleSheets i             var rules   styleSheet cssRules    styleSheet rules            for  var j 0  j lt rules length  j                   var rule   rules j                if  rule selectorText     className                    return rule style                                              return 0         NOTE  CSS rule names are transformed to lower case in some browsers  and this code is case sensitive  so better use lower case class names for this  to reactivate links   GetStyleClass  a   pointerEvents        check this page http   caniuse com pointer-events for information about browser compatibility  i think this is the best way to do it  but sadly IE  like always  will not allow it    i m posting this anyway  because i think this contains information that can be useful  and because some projects use a know browser  like when you are using web views on mobile devices   if you just want to deactivate ONE link  i only realize THAT was the question   i would use a function that manualy sets the url of the current page  or not  based on that condition   like the solution you accepted   this question was a LOT easier than i thought

User · Answer

function              window   load function                 navbar a   unbind  click                navbar a   click function                    DO SOMETHING             return false                         jQuery     I find this way easier to implement  And it has the advantage that you js  Is not inside your html but in a different file  I think that without the unbind  Both events are still active  Not sure  But in a way you only need this one event

User · Answer

Try this when you dont want user to redirect on click    lt a href  javascript  void 0   gt I am a useless link lt  a gt

User · Answer

So the above solutions make the link not work  but don t make it visible  AFAICT  that the link is no longer valid  I ve got a situation where I ve got a series of pages and want to disable  and make it obvious that it s disabled  the link that points to the current page   So   window onload   function         var topics   document getElementsByClassName  topics        for  var i   topics length-1  i  gt  -1  i--             for  var j   topics i  childNodes length-1  j  gt  -1  j--                 if  topics i  childNodes j  nodeType    1                    if  topics i  childNodes j  firstChild attributes 0  nodeValue    this n root3                        topics i  childNodes j  innerHTML   topics i  childNodes j  firstChild innerHTML                                                      This walks through the list of links  finds the one that points to the current page  the n root3 might be a local thing  but I imagine document must have something similar   and replaces the link with the link text contents   HTH

User · Answer

Try this using jQuery     function             a something   on  click   function  e            e preventDefault

User · Answer

Below code for disabled links    lt a href  javascript  void 0   gt test disabled link lt  a gt     another very simple solution is    lt a href     gt test disabled link lt  a gt    First solution is efficient

User · Answer

You can simply give it an empty hash   anchor href          or if that s not good enough of a  disable   use an event handler   anchor href    javascript void 0

User · Answer

anchor href   null

User · Answer

Based on many answers and my experience here my best solution   lt a href  quot javascript  quot  gt I am a useless link lt  a gt   Some options and theirs caveats   lt a href  quot   quot  gt I will make you page jump to top lt  a gt     lt a href  quot   quot  onclick  quot DoSomething    return false  quot  gt I ll break others scripts events lt  a gt    lt a href  quot javascript  openPage   quot   gt Please    I should be an onclick event    lt  a gt    lt a href  quot javascript  quot  onclick  quot openPage   quot   gt Please   do I even need to be an anchor  lt  a gt    lt script gt element removeAttribute  quot href quot      some browsers will remove link style lt  script gt    lt script gt element href   null    some browsers will remove link style lt  script gt    lt style gt   a my-off-class       pointer-events  none         I disable hover event too  And    Is this a style responsability   lt  style gt

User · Answer

Install this plugin for jquery and use it   http   plugins jquery com project jqueryenabledisable  It allows you to disable enable pretty much any field in the page   If you want to open a page on some condition write a java script function and call it from href  If the condition satisfied you open page otherwise just do nothing   code looks like this    lt a href  javascript  openPage     gt Click here lt  a gt   and function  function openPage     if some conditon  opener document location    http   www google com         You can also put the link in a div and set the display property of the Style attribute to none  this will hide the div  For eg     lt div id  divid  style  display none  gt   lt a href  Hiding Link    gt   lt  div gt    This will hide the link  Use a button or an image to make this div visible now by calling this function in onclick as    lt a href  Visible Link  onclick  showDiv    gt   and write the js code as   function showDiv    document getElememtById  divid   style display  block       You can also put an id tag to the html  tag  so it would be    lt a id  myATag  href  whatever  gt  lt  a gt    And get this id on your javascript by using  document getElementById  myATag   value         One of this must work for sure haha

User · Answer

Use all three of the following  Event preventDefault     Event stopPropagation     and return false    Each explained     Event preventDefault      To stop the default link-clicking behavior    The Event interface s preventDefault   method tells the user agent that if the event does not get explicitly handled  its default action should not be taken as it normally would be   Source  MDN Webdocs     Event stopPropagation      To stop the event from clicking a link within the containing parent s DOM  i e   if two links overlapped visually in the UI     The stopPropagation   method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases   Source  MDN Webdocs     return false    To indicate to the onevent handler that we are cancelling the link-clicking behavior    The return value from the handler determines if the event is canceled   Source  MDN Webdocs    Full Working JSBin Demo  StackOverflow Demo     x000D   x000D  document getElementById  my-link   addEventListener  click   function e      console log  Click happened for      e target id     e preventDefault      e stopPropagation      return false      x000D   lt a href  https   www wikipedia com   id  my-link  target   blank  gt Link lt  a gt  x000D   x000D   x000D

[javascript] How do I disable a href link in JavaScript?

Examples related to javascript

Examples related to html