Disabled href tag

Question

Although that link is disabled  it s still clickable    lt a href     disabled  disabled  gt 123n lt  a gt    Can I make it not-clickable if it s disabled  Should I use JavaScript necessarily

User · Answer

Letting a parent have pointer-events  none will disable the child a-tag like this  requires that the div covers the a and hasn t 0 width height     lt div class  disabled  gt      lt a href     gt  lt  a gt   lt  div gt    where    disabled       pointer-events  none

User · Answer

I was able to achieve the desired result using an ng-href ternary operation    lt a ng-href     condition                ng-class    is-disabled   condition    gt 123n lt  a gt    where  a is-disabled     color  grey     cursor  default       amp  hover         text-decoration  none

User · Answer

try this one    lt a href  quot javascript void 0  quot  gt Click Hare lt  a gt

User · Answer

CSS only  this removes the link from the href    disable        pointer-events  none       cursor  default

User · Answer

With the help of css you will disable the hyperlink  Try the below    x000D   x000D  a disabled   x000D    pointer-events  none  x000D    cursor  default  x000D    x000D   lt a href  link html  class  disabled  gt Link lt  a gt  x000D   x000D   x000D

User · Answer

You can use    lt a href     onclick  return false   gt 123n lt  a gt

User · Answer

HTML    lt a href     class  btn-disabled  disabled  disabled  gt 123n lt  a gt    CSS    btn-disabled   btn-disabled disabled      opacity   4    cursor  default  important    pointer-events  none

User · Answer

x000D   x000D   lt a href     disabled  true  onclick  return false  gt 123 lt  a gt  x000D   x000D   x000D    Just adding  This works in general  however it wont work if user has disabled javascript in browser   1  You could optionally use Bootstrap 3 class on your anchor tag to disable the href tag  after integrating bootstrap 3 plugin do    x000D   x000D   lt a href     class  btn btn-primary disabled  gt 123n lt  a gt  x000D   x000D   x000D    Or  2  Learn how to enable javascript using html or js in browsers   or create a pop-up telling user to enable javascript using before using the website

User · Answer

Tips 1  Using CSS   pointer-events  none   Tips 2  Using JavaScript   javascript void 0    This is a best practice    lt a href  javascript void 0   gt  lt  a gt    Tips 1  Using Jquery       selector   attr  disabled   disabled

User · Answer

You can use one of these solutions   HTML   lt a gt link lt  a gt    JavaScript   lt a href  javascript function     return false     gt link lt  a gt   lt a href     onclick  return false   gt link lt  a gt    CSS   lt a href  www page com  disabled  disabled  gt link lt  a gt    lt style type  text css  gt      a disabled  disabled             pointer-events  none         lt  style gt

User · Answer

There is an easy and clean way like so   lt a href  quot  shopcart  quot  gt      lt button class  quot btn quot  disabled gt  Make an Order  lt  button gt    lt  a gt    Having disabled attribute on a  lt button gt  by default does not let clicks go through  lt button gt  element up to  lt a gt  element  So  lt a gt  element does not even know that some clicks happened  Manipulate by adding removing disabled attribute on a  lt button gt

User · Answer

I see there are already a ton of answers posted here  but I don   t think there   s any clear one yet that combines the already mentioned approaches into the one I   ve found to work  This is to make the link both appear disabled  and also not redirect the user to another page    This answer assumes you   re using jquery and bootstrap  and uses another property to temporarily store the href property while disabled     situation where link enable disable should be toggled function toggle links enable        if  enable                toggle-link            removeClass  disabled            prop  href     this  attr  data-href              else               toggle-link            addClass  disabled            prop  data-href     this  prop  href             prop  href               a disabled     cursor  default

User · Answer

Variant that suits me    lt script gt    function locker        if     a   hasClass  locked                  a   removeClass  locked   addClass  unlocked                a   attr  onClick   return false          else               a   css  onclick   true                a   removeClass  unlocked   addClass  locked                a   attr  onClick                  lt  script gt    lt button onclick  locker    gt unlock lt  button gt    lt a href  http   some site com  class  locked  gt     lt div gt                  lt div gt   lt  a gt

User · Answer

Here are various ways to disable the a tag      lt a  gt Link Text lt  a gt  remove the href from your anchor tag  lt a href    javascript void 0      gt Link text lt  a gt  put javascript void 0  in href  lt a href     onclick  return false   gt Link text lt  a gt  using return false       As there is no disabled attributes for anchor tag    If you want to stop anchor tag behavior inside a jQuery function than you can use the the below line in the start of the function         a    click function  e     e preventDefault         lt div gt      append   default     e type     prevented     appendTo    log           event preventDefault

User · Answer

In my case  I use   lt a href     onClick  e   gt  e preventDefault    gt

User · Answer

If you re using WordPress  I created a plugin that can do this  amp  much more without needing to know how to code anything  All you need to do is add the selector of the link s  that you want to disable  amp  then choose  Disable all links with this selector in a new tab   from the dropdown menu that appears and click update   Click here to view a gif that demonstrates this  You can get the free version from the WordPress org Plugin repository to try it out

User · Answer

We can t disable it directly but we can do the following   add type  quot button quot   remove the href  quot  quot  attribute  add disabled attribute so it shows that it s disabled by changing the cursor and it becomes dimmed   example in PHP   lt  php if  status   quot Approved quot       gt     lt a type  quot button quot  class  quot btn btn-primary btn-xs quot  disabled gt  EDIT       lt  a gt     lt  php      else    gt     lt a href  quot index php quot  class  quot btn btn-primary btn-xs quot  gt  EDIT      lt  a gt     lt  php         gt

User · Answer

if you just want to temporarily disable the link but leave the href there to enable later  which is what I wanted to do  I found that all browsers use the first href  Hence I was able to do    lt a class  ea-link  href  javascript void 0   href   export   gt Export lt  a gt

User · Answer

You need to remove the  lt a gt  tag to get rid of this   or try using  -     lt a href     onclick  return false   gt 123n lt  a gt

User · Answer

you can disable link using javascript at run time by using this code         page-link   css  pointer-events    none

User · Answer

There is no disabled attribute for hyperlinks  If you don t want something to be linked then you ll need to remove the  lt a gt  tag altogether  Alternatively you can remove its href attribute - though this has other UX and Accessibility issues as noted in the comments below so is not recommended

User · Answer

The best answer is always the simplest  No need for any coding   If the  a  anchor tag has no href attribute  it is only a placeholder for a hyperlink  Supported by all browsers    x000D   x000D   lt a href     gt free web counters lt  a gt  lt br    gt  x000D   lt a     gt free web counters lt  a gt  x000D   x000D   x000D

User · Answer

The  lt a gt  tag doesn t have a disabled attribute  that s just for  lt input gt s  and  lt select gt s and  lt textarea gt s    To  disable  a link  you can remove its href attribute  or add a click handler that returns false

User · Answer

You can disable anchor tags by returning false  In my case Im using angular and ng-disabled for a Jquery accordion and I need to disable the sections   So I created a little js snippet to fix this           lt a class  opener  data-toggle  collapse                     data-parent   shipping-detail                     id  shipping-detail-section                     href   shipping-address                     aria-expanded  true                     ng-disabled  checkoutState addressSec  gt                     Shipping Address lt  a gt        lt script gt               a opener   on  click   function                 var disabled     this  attr  disabled               if  disabled      disabled                 return false                                    lt  script gt

User · Answer

You can emulate the disabled attribute on a  lt a gt  tag    lt a href  link html  disabled    gt Link lt  a gt   a disabled       pointer-events  none     cursor  default

User · Answer

Try this    lt a href  javascript void 0   style  cursor  default   gt 123n lt  a gt

User · Answer

Use buttons and links correctly         Buttons activate scripted functionality on a web page  dialogs  expand collapse regions          Links take you to another location  either to a different page or different location on the same page    If you follow these rules there won t be any scenario when you need to disable a link  Even if you make a link look visually disabled and blank onclick    lt a href    ng-click  Ctrl  isLinkActive  amp  amp   ctrl gotoMyAwesomePage      You won t be considering accessibility and screen readers will read it as a link and visually impaired people will keep wondering why is the link not working

User · Answer

document  ready function           a   click function e         e preventDefault

User · Answer

If you want to get rid of the pointer you can do this with css using cursor

User · Answer

Anything in the href tag will display at the bottom-left of the browser window when you mouse over it     I personally think having something like javascript void 0  displayed to the user is hideous   Instead  leave href off  do your magic with with jQuery whatever else and add a style rule  if you still need it to look like a link    a       cursor pointer

User · Answer

I have one    lt a href     gt This is a disabled tag  lt  a gt    Hope it will help you

[javascript] Disabled href tag

Examples related to javascript

Examples related to html