Disabled href tag

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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>

Solution 2 - Javascript

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.

Solution 3 - Javascript

You can use:

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

Solution 4 - Javascript

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>

Solution 5 - Javascript

Try this:

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

Solution 6 - Javascript

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.

Solution 7 - Javascript

HTML:

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

CSS:

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

Solution 8 - Javascript

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

Solution 9 - Javascript

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

or try using :-

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

Solution 10 - Javascript

CSS only: this removes the link from the href.

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

Solution 11 - Javascript

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

Solution 12 - Javascript

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

Solution 13 - Javascript

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

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

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

Solution 14 - Javascript

I have one:

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

Hope it will help you ;)

Solution 15 - Javascript

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

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

Solution 16 - Javascript

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

Solution 17 - Javascript

In my case, I use

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

Solution 18 - Javascript

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

add type="button".
remove the href="" attribute.
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    
}
?>

Solution 19 - Javascript

try this one

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

Solution 20 - Javascript

You can disable the link using CSS

pointer-events: none

Refrence: code with hugo

Solution 21 - Javascript

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

Solution 22 - Javascript

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>

Solution 23 - Javascript

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.

Solution 24 - Javascript

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.

Solution 25 - Javascript

Here are various ways to disable the a tag :

> Link Text remove the href from your anchor tag Link text put javascript:void(0) in href Link text 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()

Solution 26 - Javascript

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

Solution 27 - Javascript

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/

Solution 28 - Javascript

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

Solution 29 - Javascript

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>

Solution 30 - Javascript

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>

Solution 31 - Javascript

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>

Solution 32 - Javascript

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

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>

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

Solution 33 - Javascript

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Alan Coromano	View Question on Stackoverflow
Solution 1 - Javascript	Lakhan	View Answer on Stackoverflow
Solution 2 - Javascript	John Conde	View Answer on Stackoverflow
Solution 3 - Javascript	CodeLikeBeaker	View Answer on Stackoverflow
Solution 4 - Javascript	IgniteCoders	View Answer on Stackoverflow
Solution 5 - Javascript	user2742371	View Answer on Stackoverflow
Solution 6 - Javascript	gen_Eric	View Answer on Stackoverflow
Solution 7 - Javascript	Syed	View Answer on Stackoverflow
Solution 8 - Javascript	venkatskpi	View Answer on Stackoverflow
Solution 9 - Javascript	Rahul Tripathi	View Answer on Stackoverflow
Solution 10 - Javascript	Joel Adams	View Answer on Stackoverflow
Solution 11 - Javascript	Ferus	View Answer on Stackoverflow
Solution 12 - Javascript	Mahmoud Farahat	View Answer on Stackoverflow
Solution 13 - Javascript	Blowsie	View Answer on Stackoverflow
Solution 14 - Javascript	user9861020	View Answer on Stackoverflow
Solution 15 - Javascript	Chintan Mathukiya	View Answer on Stackoverflow
Solution 16 - Javascript	ahdaniels	View Answer on Stackoverflow
Solution 17 - Javascript	Chien Chieh Wang	View Answer on Stackoverflow
Solution 18 - Javascript	Assaad Lutf	View Answer on Stackoverflow
Solution 19 - Javascript	Adeel Ahmed Baloch	View Answer on Stackoverflow
Solution 20 - Javascript	Bilal	View Answer on Stackoverflow
Solution 21 - Javascript	Corey Webster	View Answer on Stackoverflow
Solution 22 - Javascript	Intergalactic	View Answer on Stackoverflow
Solution 23 - Javascript	Sengupta Amit	View Answer on Stackoverflow
Solution 24 - Javascript	Chris Marabate	View Answer on Stackoverflow
Solution 25 - Javascript	Mahak Choudhary	View Answer on Stackoverflow
Solution 26 - Javascript	owengall	View Answer on Stackoverflow
Solution 27 - Javascript	Eduardo Steffens	View Answer on Stackoverflow
Solution 28 - Javascript	Enigma Plus	View Answer on Stackoverflow
Solution 29 - Javascript	Litter	View Answer on Stackoverflow
Solution 30 - Javascript	Darryl Windsor	View Answer on Stackoverflow
Solution 31 - Javascript	Angus Walker	View Answer on Stackoverflow
Solution 32 - Javascript	OlaJ	View Answer on Stackoverflow
Solution 33 - Javascript	MaximSemenov	View Answer on Stackoverflow