I have a link button inside a You can't disable a link (in a portable way). You can use one of these techniques (each one with its own benefits and disadvantages). This should be the right way (but see later) to do it when most of browsers will support it: It's what, for example, Bootstrap 3.x does. Currently (2016) it's well supported only by Chrome, FireFox and Opera (19+). Internet Explorer started to support this from version 11 but not for links however it's available in an outer element like: With: We, probably, need to define a CSS class for Another option for IE 11 is to set Note that this may be a portable solution if you need to support IE (and you can change your HTML) but... All this said please note that In conjunction with above described CSS technique you may use I never checked its compatibility with many browsers then you may want to test it by yourself before using this. It has the advantage to work without JavaScript. Unfortunately (but obviously) Use a To disable links do this: To re-enable them: If you want instead of Zoltán Tamási noted in a comment that "in some cases the click event is already bound to some "real" function (for example using knockoutjs) In that case the event handler ordering can cause some troubles. Hence I implemented disabled links by binding a return false handler to the link's Note that if Clear the And this one to re-enable them: Personally I do not like this solution very much (if you do not have to do more with disabled links) but it may be more compatible because of various way to follow a link. Add/remove an To re-enable them: I do not think there is a reason to prefer this solution instead of the first one. Styling is even more simple, whatever solution you're using to disable the link we did add a If you're using a class instead of attribute: If you're using an UI framework you may see that disabled links aren't styled properly. Bootstrap 3.x, for example, handles this scenario and button is correctly styled both with Do not forget to also include an attribute Try the element: Disabling a link works for me in Chrome: http://jsfiddle.net/KeesCBakker/LGYpz/. Firefox doesn't seem to play nice. This example works: Note: added a 'live' statement for future disabled / enabled links. To disable link to access another page on touch device: In Razor (.cshtml) you can do: you cannot disable a link, if you want that click event should not fire then simply For More Info :- Elements that can be Disabled Got the fix in css. Above css when applied to the anchor tag will disable the click event. For details checkout this link which I have to disable. This works on IE but not working in Firefox and Chrome.
Structure is - Link inside a <
CSS way
a.disabled {
pointer-events: none;
}
span.disable-links {
pointer-events: none;
}
<span class="disable-links"><a href="#">...</a></span>
Workaround
pointer-events: none
but what if we reuse the disabled
attribute instead of a CSS class? Strictly speaking disabled
is not supported for <a>
but browsers won't complain for unknown attributes. Using the disabled
attribute IE will ignore pointer-events
but it will honor IE specific disabled
attribute; other CSS compliant browsers will ignore unknown disabled
attribute and honor pointer-events
. Easier to write than to explain:a[disabled] {
pointer-events: none;
}
display
of link elements to block
or inline-block
:<a style="pointer-events: none; display: inline-block;" href="#">...</a>
pointer-events
disables only...pointer events. Links will still be navigable through keyboard then you also need to apply one of the other techniques described here.Focus
tabindex
in a non-standard way to prevent an element to be focused:<a href="#" disabled tabindex="-1">...</a>
tabindex
cannot be changed from CSS.Intercept clicks
href
to a JavaScript function, check for the condition (or the disabled attribute itself) and do nothing in case.$("td > a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
$("td > a").attr("disabled", "disabled");
$("td > a").removeAttr("disabled");
.is("[disabled]")
you may use .attr("disabled") != undefined
(jQuery 1.6+ will always return undefined
when the attribute is not set) but is()
is much more clear (thanks to Dave Stewart for this tip). Please note here I'm using the disabled
attribute in a non-standard way, if you care about this then replace attribute with a class and replace .is("[disabled]")
with .hasClass("disabled")
(adding and removing with addClass()
and removeClass()
).touchstart
, mousedown
and keydown
events. It has some drawbacks (it will prevent touch scrolling started on the link)" but handling keyboard events also has the benefit to prevent keyboard navigation.href
isn't cleared it's possible for the user to manually visit that page.Clear the link
href
attribute. With this code you do not add an event handler but you change the link itself. Use this code to disable links:$("td > a").each(function() {
this.data("href", this.attr("href"))
.attr("href", "javascript:void(0)")
.attr("disabled", "disabled");
});
$("td > a").each(function() {
this.attr("href", this.data("href")).removeAttr("disabled");
});
Fake click handler
onclick
function where you return false
, link won't be followed. To disable links:$("td > a").attr("disabled", "disabled").on("click", function() {
return false;
});
$("td > a").removeAttr("disabled").off("click");
Styling
disabled
attribute so you can use following CSS rule:a[disabled] {
color: gray;
}
a.disabled {
color: gray;
}
disabled
attribute and with .disabled
class. If, instead, you're clearing the link (or using one of the others JavaScript techniques) you must also handle styling because an <a>
without href
is still painted as enabled. Accessible Rich Internet Applications (ARIA)
aria-disabled="true"
together with disabled
attribute/class.$(td).find('a').attr('disabled', 'disabled');
<a id="a1" href="http://www.google.com">Google 1</a>
<a id="a2" href="http://www.google.com">Google 2</a>
$('#a1').attr('disabled', 'disabled');
$(document).on('click', 'a', function(e) {
if ($(this).attr('disabled') == 'disabled') {
e.preventDefault();
}
});
Note2: changed 'live' into 'on'.if (control == false)
document.getElementById('id_link').setAttribute('href', '#');
else
document.getElementById('id_link').setAttribute('href', 'page/link.html');
end if;
@{
var isDisabled = true;
}
<a href="@(isDisabled ? "#" : @Url.Action("Index", "Home"))" @(isDisabled ? "disabled=disabled" : "") class="btn btn-default btn-lg btn-block">Home</a>
Remove
the action
from that link.$(td).find('a').attr('href', '');
td.disabledAnchor a{
pointer-events: none !important;
cursor: default;
color:Gray;
}