[javascript] Disabled href tag

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?

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

or try using :-

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

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  />_x000D_
<a "/">free web counters</a>

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>

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

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

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

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

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>

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>.

Try this:

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

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.

You can use:

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

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

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>

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

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

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

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

I have one:

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

Hope it will help you ;)

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

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

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

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

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

HTML:

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

CSS:

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

CSS only: this removes the link from the href.

.disable { 
    pointer-events: none; 
    cursor: default; 
}

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");

<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

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.

In my case, I use

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

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

try this one

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

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.

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>

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