Really Disable HTML Achor Link
Today I was reintroduced to the HTML/CSS/Javascript ability to disable HTML achors. Well, after the link appeared disabled but wasn't really disabled, I recalled this trick.
I started with this...
<li><a href="#" id="lnk1" target="_blank" disabled="disabled" Onclick="Javascript:return false;">Link1</a></li>...which rendered this...
This HTML works; however, the user may still waste their time clicking since the cursor is still a hand.
So, the solution is to change the cursor, too.
<li><a href="#" id="lnk1" target="_blank" disabled="disabled" Onclick="Javascript:return false;" style="cursor:text;">Link1</a></li>
Finishing touch is to remove the underline.
<li><a href="#" id="lnk1" target="_blank" disabled="disabled" Onclick="Javascript:return false;" style="cursor:text;text-decoration:none;">Link1</a></li>
Now lets’ compare it next to an active link.
<li><a href="#" id="lnk1" target="_blank" >Active Link1</a></li> <li><a href="#" id="lnk2" target="_blank" disabled="disabled" Onclick="Javascript:return false;" style="cursor:text;text-decoration:none;">Inactive Link1</a></li>Hover over the active link, you see this...
Hover over the inactive link, you see this...
If you’re using ASP.NET, here’s the code behind method you can use in both VB.NET and C#.NET.
VB.NET
Public Shared Sub DisableLink(ByVal item As HtmlAnchor, ByVal disable As Boolean) item.Disabled = disable item.Attributes("onClick") = "javascript:return false;" item.Attributes("style") = "cursor: text; text-decoration:none;"End SubC#
public void DisableLink(HtmlAnchor item, Boolean disable) { item.Disabled = disable; item.Attributes.Add("onClick", "javascript:return false;"); item.Style.Add("cursor", "text-decoration:none;"); } I hope this helps you, too!
Signing Off,
Vivian
ViSO Tech
Comments