How to disable HTML links

Question

I have a link button inside a  lt td gt  which I have to disable  This works on IE but not working in Firefox and Chrome  Structure is - Link inside a  lt td gt   I cannot add any container in the  lt td gt   like div span   I tried all the following but not working on Firefox  using 1 4 2 js      td  children   each function                this  attr  disabled    disabled                td  children   attr  disabled    disabled         td  children   attr  disabled   true        td  children   attr  disabled    true      Note - I cannot de-register the click function for the anchor tag as it is registered dynamically  AND I HAVE TO SHOW THE LINK IN DISABLED MODE

User · Answer

Got the fix in css    td disabledAnchor a         pointer-events  none  important         cursor  default         color Gray      Above css when applied to the anchor tag will disable the click event   For details checkout this link

User · Answer

you cannot disable a link  if you want that click event should not fire then simply Remove the action from that link     td  find  a   attr  href          For More Info  -  Elements that can be Disabled

User · Answer

You can t disable a link  in a portable way   You can use one of these techniques  each one with its own benefits and disadvantages    CSS way  This should be the right way  but see later  to do it when most of browsers will support it   a disabled       pointer-events  none      It s what  for example  Bootstrap 3 x does  Currently  2016  it s well supported only by Chrome  FireFox and Opera  19    Internet Explorer started to support this from version 11 but not for links however it s available in an outer element like   span disable-links       pointer-events  none      With    lt span class  disable-links  gt  lt a href     gt     lt  a gt  lt  span gt    Workaround  We  probably  need to define a CSS class for pointer-events  none but what if we reuse  the disabled attribute instead of a CSS class  Strictly speaking disabled is not supported for  lt a gt  but browsers won t complain for unknown attributes  Using the disabled attribute IE will ignore pointer-events but it will honor IE specific disabled attribute  other CSS compliant browsers will ignore unknown disabled attribute and honor pointer-events  Easier to write than to explain   a disabled        pointer-events  none      Another option for IE 11 is to set display of link elements to block or inline-block    lt a style  pointer-events  none  display  inline-block   href     gt     lt  a gt    Note that this may be a portable solution if you need to support IE  and you can change your HTML  but     All this said please note that pointer-events disables only   pointer events  Links will still be navigable through keyboard then you also need to apply one of the other techniques described here   Focus  In conjunction with above described CSS technique you may use tabindex in a non-standard way to prevent an element to be focused    lt a href     disabled tabindex  -1  gt     lt  a gt    I never checked its compatibility with many browsers then you may want to test it by yourself before using this  It has the advantage to work without JavaScript  Unfortunately  but obviously  tabindex cannot be changed from CSS   Intercept clicks  Use a href to a JavaScript function  check for the condition  or the disabled attribute itself  and do nothing in case      td  gt  a   on  click   function event       if    this  is   disabled               event preventDefault                To disable links do this      td  gt  a   attr  disabled    disabled      To re-enable them      td  gt  a   removeAttr  disabled      If you want instead of  is   disabled    you may use  attr  disabled      undefined  jQuery 1 6  will always return undefined when the attribute is not set  but is   is much more clear  thanks to Dave  Stewart for this tip   Please note here I m using the disabled attribute in a non-standard way  if you care about this then replace attribute with a class and replace  is   disabled    with  hasClass  disabled    adding and removing with addClass   and removeClass      Zolt  n Tam  si noted in a comment that  in some cases the click event is already bound to some  real  function  for example using knockoutjs  In that case the event handler ordering can cause some troubles  Hence I implemented disabled links by binding a return false handler to the link s touchstart  mousedown and keydown events  It has some drawbacks  it will prevent touch scrolling started on the link   but handling keyboard events also has the benefit to prevent keyboard navigation   Note that if href isn t cleared it s possible for the user to manually visit that page   Clear the link  Clear the href attribute  With this code you do not add an event handler but you change the link itself  Use this code to disable links      td  gt  a   each function         this data  href   this attr  href             attr  href    javascript void 0             attr  disabled    disabled          And this one to re-enable them      td  gt  a   each function         this attr  href   this data  href    removeAttr  disabled          Personally I do not like this solution very much  if you do not have to do more with disabled links  but it may be more compatible because of various way to follow a link   Fake click handler  Add remove an onclick function where you return false  link won t be followed  To disable links      td  gt  a   attr  disabled    disabled   on  click   function         return false         To re-enable them      td  gt  a   removeAttr  disabled   off  click      I do not think there is a reason to prefer this solution instead of the first one   Styling  Styling is even more simple  whatever solution you re using to disable the link we did add a disabled attribute so you can use following CSS rule   a disabled        color  gray      If you re using a class instead of attribute   a disabled       color  gray      If you re using an UI framework you may see that disabled links aren t styled properly  Bootstrap 3 x  for example  handles this scenario and button is correctly styled both with disabled attribute and with  disabled class  If  instead  you re clearing the link  or using one of the others JavaScript techniques  you must also handle styling because an  lt a gt  without href is still painted as enabled    Accessible Rich Internet Applications  ARIA   Do not forget to also include an attribute aria-disabled  true  together with disabled attribute class

User · Answer

In Razor   cshtml  you can do          var isDisabled   true      lt a href    isDisabled          Url Action  Index    Home       isDisabled    disabled disabled        class  btn btn-default btn-lg btn-block  gt Home lt  a gt

User · Answer

There is one other possible way  and the one that I like best  Basically it s the same way lightbox disables a whole page  by placing a div and fiddling with z-index  Here is relevant snippets from a project of mine  This works in all browsers       Javascript  jQuery    var windowResizer   function            var offset       back   offset               var buttontop   offset top          var buttonleft   offset left              backdisabler   css   top  buttontop  left  buttonleft  visibility   visible             offset       next   offset            buttontop   offset top          buttonleft   offset left              nextdisabler   css   top  buttontop  left  buttonleft  visibility   visible          document  ready function           window  resize function                setTimeout function                 windowResizer               5     when the maximize restore buttons are pressed  we have to wait or it will fire to fast               and in html   lt a href    id  back  style  float  left  gt  lt img src  images icons back png  style  height  50px  width  50px    gt  lt  a gt   lt a href    id  next  style  float  right  gt  lt img src  images icons next png  style  height  50px  width  50px    gt  lt  a gt   lt img id  backdisabler  src  images icons disabled png  style  visibility  hidden  position  absolute  padding  5px  height  62px  width  62px  z-index  9000   gt   lt img id  nextdisabler  src  images icons disabled png  style  visibility  hidden  position  absolute  padding  5px  height  62px  width  62px  z-index  9000   gt    So the resizer finds the anchor s  the images are just arrows  locations and places the disabler on top  The disabler s image is a translucent grey square  change the width height of the disablers in the html to match your link  to show that it is disabled  The floating allows the page to resize dynamically  and the disablers will follow suit in windowResizer    You can find suitable images through google  I have placed the relevant css inline for simplicity   then based on some condition        backdisabler   css   visibility   hidden         nextdisabler   css   visibility   visible

User · Answer

To disable link to access another page on touch device   if  control    false    document getElementById  id link   setAttribute  href         else   document getElementById  id link   setAttribute  href    page link html    end if

User · Answer

I would do something like     td   find  a   each function       this  addClass  disabled-link             disabled-link   on  click   false     something like this should work  You add a class for links you want to have disabled and then you return false when someone click them  To enable them just remove the class

User · Answer

You can use this to disabled the Hyperlink of asp net or link buttons in html      td  gt  a   attr  disabled    disabled   on  click   function         return false

User · Answer

I think a lot of these are over thinking  Add a class of whatever you want  like disabled link  Then make the css have  disabled link   display  none    Boom now the user can t see the link so you won t have to worry about them clicking it  If they do something to satisfy the link being clickable  simply remove the class with jQuery     a disabled link   removeClass  super disabled    Boom done

User · Answer

Bootstrap 4 1 provides a class named disabled and aria-disabled  true  attribute   example    lt a href              class  btn btn-primary btn-lg disabled           tabindex  -1           role  button  aria-disabled  true   gt      Primary link  lt  a gt    More is on getbootstrap com  So if you want to make it dynamically  and you don t want to care if it is button or ancor than in JS script you need something like that     let  btn     myClass        btn attr  disabled   true      if   btn 0  tagName     A             btn off             btn addClass  disabled             btn attr  aria-disabled   true          But be carefull  The solution only works on links with classes btn btn-link   Sometimes bootstrap recommends using card-link class  in this case solution will not work

User · Answer

I ve ended up with the solution below  which can work with either an attribute   lt a href       disabled  disabled  gt   or a class  lt a href       class  disabled  gt    CSS Styles   a disabled disabled   a disabled       color  gray      cursor  default     a disabled disabled  hover  a disabled hover       text-decoration  none      Javascript  in jQuery ready       a disabled   a disabled   on  click   function e        var  this     this       if   this is   disabled disabled        this hasClass  disabled            e preventDefault

User · Answer

Thanks to everyone that posted solutions  especially  AdrianoRepetti   I combined multiple approaches to provide some more advanced disabled functionality  and it works cross browser   The code is below  both ES2015 and coffeescript based on your preference    This provides for multiple levels of defense so that Anchors marked as disable actually behave as such  Using this approach  you get an anchor that you cannot    click tab to and hit return tabbing to it will move focus to the next focusable element it is aware if the anchor is subsequently enabled     How to   Include this css  as it is the first line of defense   This assumes the selector you use is a disabled  a disabled     pointer-events  none    cursor  default     Next  instantiate this class on ready  with optional selector      new AnchorDisabler        ES2015 Class  npm install -S key js  import  Key  Keycodes  from  key js   export default class AnchorDisabler     constructor  config     selector   a disabled           this config   config       this config selector         click  ev    gt  this onClick ev          keyup  ev    gt  this onKeyup ev          focus  ev    gt  this onFocus ev          isStillDisabled  ev            since disabled can be a class or an attribute  and it can be dynamically removed  always recheck on a watched event     let target     ev target      if  target hasClass  disabled      target prop  disabled       disabled           return true           else         return false              onFocus  ev            if an attempt is made to focus on a disabled element  just move it along to the next focusable one      if   this isStillDisabled ev           return            let focusables       focusable       if   focusables          return            let current   focusables index ev target      let next   null     if  focusables eq current   1  length          next   focusables eq current   1        else         next   focusables eq 0             if  next          next focus                onClick  ev           disabled could be dynamically removed     if   this isStillDisabled ev           return            ev preventDefault       return false        onKeyup  ev           We are only interested in disabling Enter so get out fast     if  Key isNot ev  Keycodes ENTER           return               disabled could be dynamically removed     if   this isStillDisabled ev           return            ev preventDefault       return false           Coffescript class   class AnchorDisabler   constructor   selector    a disabled   - gt        selector  click  onClick  keyup  onKeyup  focus  onFocus     isStillDisabled   ev    gt          since disabled can be a class or an attribute  and it can be dynamically removed  always recheck on a watched event         target     ev target      return true if target hasClass  disabled       return true if target attr  disabled   is  disabled      return false    onFocus   ev    gt          if an attempt is made to focus on a disabled element  just move it along to the next focusable one          return unless  isStillDisabled ev       focusables       focusable       return unless focusables      current   focusables index ev target      next    if focusables eq current   1  length then focusables eq current   1  else focusables eq 0        next focus   if next     onClick   ev    gt        disabled could be dynamically removed     return unless  isStillDisabled ev       ev preventDefault       return false    onKeyup   ev    gt         13 is the js key code for Enter  we are only interested in disabling that so get out fast     code   ev keyCode or ev which     return unless code is 13        disabled could be dynamically removed     return unless  isStillDisabled ev       ev preventDefault       return false

User · Answer

Try the element     td  find  a   attr  disabled    disabled      Disabling a link works for me in Chrome  http   jsfiddle net KeesCBakker LGYpz    Firefox doesn t seem to play nice  This example works    lt a id  a1  href  http   www google com  gt Google 1 lt  a gt   lt a id  a2  href  http   www google com  gt Google 2 lt  a gt       a1   attr  disabled    disabled       document  on  click    a   function e        if    this  attr  disabled       disabled             e preventDefault                Note  added a  live  statement for future disabled   enabled links  Note2  changed  live  into  on

User · Answer

Just add a css property   lt style gt     a    pointer-events  none     lt  style gt   Doing so you can disable the anchor tag

[javascript] How to disable HTML links

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css