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?
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?
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>
opacity: 0.5;
Feb 18, 2019 at 18:29
tabindex="-1"
inside your anchor tag in order to disable it.
May 6, 2021 at 21:09
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.
onclick="return false;"
to the anchor tag and perhaps add a title
attribute that explains that the link is not valid.
Jun 18, 2019 at 17:52
href
and leaving the <a>
would not be ADA compliant.
Oct 10, 2019 at 17:08
You can use:
<a href="/" onclick="return false;">123n</a>
You can use one of these solutions:
<a>link</a>
<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>
<a href="www.page.com" disabled="disabled">link</a>
<style type="text/css">
a[disabled="disabled"] {
pointer-events: none;
}
</style>
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.
href
may make the cursor not change when you hover over it.
HTML:
<a href="/" class="btn-disabled" disabled="disabled">123n</a>
CSS:
.btn-disabled,
.btn-disabled[disabled] {
opacity: .4;
cursor: default !important;
pointer-events: none;
}
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");
You need to remove the <a>
tag to get rid of this.
or try using :-
<a href="/" onclick="return false;">123n</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;
}
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
});
});
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 have one:
<a href="#">This is a disabled tag.</a>
Hope it will help you ;)
you can disable link using javascript at run time by using this code
$('.page-link').css("pointer-events", "none");
We can't disable it directly but we can do the following:
type="button"
.href=""
attribute.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
}
?>
<a>
Oct 21, 2020 at 6:07
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;
}
}
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>
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.
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" );
});
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;
}
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 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/
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;
}
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>
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>
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>
<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
<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>
.