Disabled href tag

Question

Although that link is disabled, it's still clickable.

<a href="/" disabled="disabled">123n</a>

Can I make it not-clickable if it's disabled? Should I use JavaScript necessarily?

Answer 1

With the help of css you will disable the hyperlink. Try the below

a.disabled {
  pointer-events: none;
  cursor: default;
}

<a href="link.html" class="disabled">Link</a>

Answer 2

There is no disabled attribute for hyperlinks. If you don't want something to be linked then you'll need to remove the <a> 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.

Answer 3

You can use:

<a href="/" onclick="return false;">123n</a>

Answer 4

You can use one of these solutions:

HTML

<a>link</a>

JavaScript

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

CSS

<a href="www.page.com" disabled="disabled">link</a>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
</style>

---

Answer 5

Try this:

<a href="javascript:void(0)" style="cursor: default;">123n</a>

Answer 6

The <a> tag doesn't have a disabled attribute, that's just for <input>s (and <select>s and <textarea>s).

To "disable" a link, you can remove its href attribute, or add a click handler that returns false.

Answer 7

HTML:

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS:

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}

Answer 8

Tips 1: Using CSS pointer-events: none;

Tips 2: Using JavaScript javascript:void(0) (This is a best practice)

<a href="javascript:void(0)"></a>

Tips 1: Using Jquery $('selector').attr("disabled","disabled");

Answer 9

You need to remove the <a> tag to get rid of this.

or try using :-

  <a href="/" onclick="return false;">123n</a>

Answer 10

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):

<div class="disabled">
   <a href="/"></a>
</div>

where:

.disabled {
    pointer-events: none;
}

Answer 11

$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});

Answer 12

You can emulate the disabled attribute on a <a> tag.

<a href="link.html" disabled="">Link</a>

a[disabled] {
   pointer-events: none;
   cursor: default;
}

Answer 13

you can disable link using javascript at run time by using this code

$('.page-link').css("pointer-events", "none");

Answer 14

I have one:

<a href="#">This is a disabled tag.</a>

Hope it will help you ;)

Answer 15

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

Answer 16

In my case, I use

<a href="/" onClick={e => e.preventDefault()}>

Answer 17

We can't disable it directly but we can do the following:

1. add type="button".
2. remove the href="" attribute.
3. add disabled attribute so it shows that it's disabled by changing the cursor and it becomes dimmed.

example in PHP:

<?php
if($status=="Approved"){ 
?>
  <a type="button" class="btn btn-primary btn-xs" disabled> EDIT
     </a>
  <?php    
}else{
?>
  <a href="index.php" class="btn btn-primary btn-xs"> EDIT
    </a>
  <?php    
}
?>

Answer 18

I was able to achieve the desired result using an ng-href ternary operation

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

where

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

Answer 19

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!

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

Answer 20

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

<a href="" ng-click="Ctrl._isLinkActive && $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.

Answer 21

Here are various ways to disable the a tag :

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> 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();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault()

Answer 22

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;
}

Answer 23

If you're using WordPress, I created a plugin that can do this & 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 & 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.

Answer 24

If you need to disabled link on laravel with Javascript, here is my solution:

Link(blade.php):

<a href='/link/to/path' class='btn btn-primary mt-3' onclick='disableLink(this)'>Confirmar</a>

.css file

.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
}

a[aria-disabled="true"] {
    color: currentColor;
    display: inline-block; /* For IE11/ MS Edge bug */
    pointer-events: none;
    text-decoration: none;
}

.js file

function disableLink(link) {
    // 1. Add isDisabled class to parent element
    link.parentElement.classList.add('isDisabled');
    // 2. Store href so we can add it later
    link.setAttribute('data-href', link.href);
    // 3. Set aria-disabled to 'true'
    link.setAttribute('aria-disabled', 'true');
}

function enableLink(link) {
    // 1. Remove 'isDisabled' class from parent span
    link.parentElement.classList.remove('isDisabled');
    // 2. Set href
    link.href = link.getAttribute('data-href');
    // 3. Remove 'aria-disabled', better than setting to false
    link.removeAttribute('aria-disabled');
}

Reference: https://css-tricks.com/how-to-disable-links/

Answer 25

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;
}

Answer 26

Variant that suits me:

<script>
  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","");
    }
  }
</script>

<button onclick="locker()">unlock</button>

<a href="http://some.site.com" class="locked">
  <div> 
      .... 
  <div>
</a>

Answer 27

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.

       <a class="opener" data-toggle="collapse"
                   data-parent="#shipping-detail"
                   id="shipping-detail-section"
                   href="#shipping-address"
                   aria-expanded="true"
                   ng-disabled="checkoutState.addressSec">
                   Shipping Address</a>
     <script>
          $("a.opener").on("click", function () {
           var disabled = $(this).attr("disabled");
           if (disabled === 'disabled') {
            return false;
           }
           });
     </script>

Answer 28

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:

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

Answer 29

<a href="/" disabled="true" onclick="return false">123</a>

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

<a href="/" class="btn btn-primary disabled">123n</a>

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

Answer 30

There is an easy and clean way like so:

<a href="/shopcart/">

  <button class="btn" disabled> Make an Order </button>

</a>

Having disabled attribute on a <button> by default does not let clicks go through <button> element up to <a> element. So <a> element does not even know that some clicks happened. Manipulate by adding/removing disabled attribute on a <button>.