Should the HTML Anchor Tag Honor the Disabled Attribute?
IE appears to be acting incorrectly in this instance.
See the HTML5 spec
The IDL attribute disabled only applies to style sheet links. When the
link element defines a style sheet link, then the disabled attribute
behaves as defined for the alternative style sheets DOM. For all other
link elements it always return false and does nothing on setting.
http://dev.w3.org/html5/spec/Overview.html#the-link-element
The HTML4 spec doesn't even mention disabled
http://www.w3.org/TR/html401/struct/links.html#h-12.2
EDIT
I think the only way to get this effect cross-browser is js/css as follows:
#link{
text-decoration:none;
color: #ccc;
}
js
$('#link').click(function(e){
e.preventDefault();
});
Example: http://jsfiddle.net/jasongennaro/QGWcn/
What is the use of Order attribute in this Anchor tag?
It (along with encodeurl
) has no meaning in HTML. It is a non-standard expando attribute, presumably existing to be read by JS in the page and should be a data-
attribute.
How to disable HTML links
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).
CSS way
This should be the right way (but see later) to do it when most of browsers will support it:
a.disabled {
pointer-events: none;
}
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:
span.disable-links {
pointer-events: none;
}
With:
<span class="disable-links"><a href="#">...</a></span>
Workaround
We, probably, need to define a CSS class for 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;
}
Another option for IE 11 is to set display
of link elements to block
or inline-block
:
<a style="pointer-events: none; display: inline-block;" href="#">...</a>
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 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
In conjunction with above described CSS technique you may use tabindex
in a non-standard way to prevent an element to be focused:
<a href="#" disabled tabindex="-1">...</a>
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) tabindex
cannot be changed from CSS.
Intercept clicks
Use a 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();
}
});
To disable links do this:
$("td > a").attr("disabled", "disabled");
To re-enable them:
$("td > a").removeAttr("disabled");
If you want instead of .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()
).
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 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.
Note that if href
isn't cleared it's possible for the user to manually visit that page.
Clear the link
Clear the 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");
});
And this one to re-enable them:
$("td > a").each(function() {
this.attr("href", this.data("href")).removeAttr("disabled");
});
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.
Fake click handler
Add/remove an onclick
function where you return false
, link won't be followed. To disable links:
$("td > a").attr("disabled", "disabled").on("click", function() {
return false;
});
To re-enable them:
$("td > a").removeAttr("disabled").off("click");
I do not think there is a reason to prefer this solution instead of the first one.
Styling
Styling is even more simple, whatever solution you're using to disable the link we did add a disabled
attribute so you can use following CSS rule:
a[disabled] {
color: gray;
}
If you're using a class instead of attribute:
a.disabled {
color: gray;
}
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 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)
Do not forget to also include an attribute aria-disabled="true"
together with disabled
attribute/class.
How to determine if a is disabled
You need to get the attribute directly like this:
expect(myelement.getAttribute('disabled')).toBeTruthy();
I use this in my Protractor testing daily without issue.
anchor tag target attribute is not working
"target" attribute will not work in some browsers. Try like this.. hope it works..
<a href="javascript:void(window.parent.document.getElementById('FrameMain').src='UserSelection.aspx')" id="UserLink" runat="server">
Disable href with jquery/js
You can use preventDefault();
to disable the default behaviour of links (which is, to navigate to the given href
).
$("a").click(function(e){
e.preventDefault();
});
Can wrapping a div or an anchor tag around a LI still be considered valid html structure
No, it is not valid, though it often works.
Yes, the reason most people do like this is to make it clickable.
There is many ways to make any element besides an anchor clickable, where wrapping an anchor around it is the most used.
This is valid for all non block level elements, but will likely work on all element level types because of event bubbling.
For block level elements (can also be used on inline elements), one can do like this, to make the whole element clickable
HTML
<div class="clickable"><a href='....'></a></div>
CSS
.clickable a {
display: inline-block; height: 100%; width: 100%; /* fill the parent */
}
An alternative when one just can't use an anchor and still need it clickable, would be by using a click handler, like this, using jQuery.
$( "li" ).click(function() {
// Do something here on click
});
Related Topics
Is It Ok to Use Unknown HTML Tags
Fit Website Background Image to Screen Size
How to Scale a Stubborn Svg Embedded with the <Object> Tag
Will the <B> and <I> Tags Ever Become Deprecated
How to Locate the Default Style Sheet for a Browser
Multiple Selections with Datalist
How to Avoid Sending Input Fields Which Are Hidden by Display:None to a Server
How to Embed Latex in a Webpage
Disable Double-Tap "Zoom" Option in Browser on Touch Devices
Css: How to Set Image Size Relative to Parent Height
CSS - Relative Positioned Parent Div Not Stretching to Absolute Child Div Height
Gmail Blocking Small Embedded Inline Images in Email Template
Is Cross-Origin Postmessage Broken in Ie10
Difference Between Position:Sticky and Position:Fixed
Add a Pipe Separator After Items in an Unordered List Unless That Item Is the Last on a Line
Pure CSS Chessboard with Div & No Classes or Ids, Is It Possible