BUG: DISABLED Attribute Does Not Disable Hyperlinks

View products that this article applies to.

Symptoms

Although the DISABLED attribute is set to true for a hyperlink, as in the following,

<a DISABLED="true" href="http://www.microsoft.com/">Where do you want to go today?</a>

users can still click on the hyperlink and Internet Explorer navigates to the selected page.

↑ Back to the top

Resolution

To resolve this problem, set an onclick event for the hyperlink that returns either true or false depending on the current execution context. The following code sets the value of a global Microsoft JScript variable to true or false, depending on a button click. The target hyperlink object's DISABLED property is updated so that it can properly communicate its disabled status to other objects and script functions on the page.

<html>

<head>
<title>Workaround for DISABLED Attribute Problem</title>

<SCRIPT>

var canNav = false;

function canNavigate() {
	return canNav;
}

function load() {
	document.all("btn1").innerText = "Link status == " + canNav;
}

function setNavigate(linkObj, canNavParam) {
	if (linkObj != null) {
		if (canNavParam == false) {
			linkObj.disabled = true;
		} else {
			linkObj.disabled = false;
		}
		canNav = canNavParam;
	} 
}

function updateBtnStatus(btnName) {
	var btn = document.all(btnName);
	if (btn != null) {
		document.all(btnName).innerText = "Link status == " + canNav;
	}
}

</SCRIPT>

</head>

<body onload="load();">

<a id="lnk1" disabled=true href="http://www.microsoft.com/" onclick="return canNavigate();">Click  here</a><p>

<button id=btn1 onclick="setNavigate(document.all('lnk1'), !(canNav));updateBtnStatus('btn1');">
</button>


</body>

</html>

↑ Back to the top