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?

Answers:

Answer

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

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

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

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

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

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

Answer

CSS only: this removes the link from the href.

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

I have one:

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

Hope it will help you ;)

Answer

In my case, I use

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

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 show that its disabled by changing the courser and it becomes dimmed.

following is an example

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

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

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

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

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

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

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

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, or remove its href attribute.

Answer

You can use:

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

Try this:

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

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

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

or try using :-

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

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
$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});
Answer

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

Answer

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

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

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

<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

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.