Of Stack

The Disabled property Disabled of the hyperlink is used in the example

  • 2020-03-30 03:37:05
  • OfStack

You can set the true and false of the Disabled property of the hyperlink to determine if the hyperlink is clickable

Such as: 


<a herf='http://www.baidu.com' onclick='return click(this);' disabled='ture'>bai du</a>

The above meaning is that we do not want the hyperlink of bai du to take effect. However, if we click on bai du without any constraint or judgment, it will naturally jump to baidu page when we click on bai du. This is the bug of disabling hyperlinks in HTML
You can add the following js constraint to determine whether the hyperlink is usable   


<script language='javascript'> 
function click(obj) 
{ 
if(obj.disabled) 
{ 
return false; 
} 
return ture; 
} 
</script>

The following bug solution from Microsoft:

With the help of global variables, the disabled property is changed by using other buttons to obtain the effect of disabled property.

BUG: the DISABLED property no longer disables hyperlinks
Although the DISABLED property is set to True and a hyperlink is
< A DISABLED = "true" href = "http://www.microsoft.com/" rel = "external nofollow" rel = "external nofollow" > Where do you want to go today? < / a>
The user can still click the hyperlink, and then Internet Explorer navigates to the selected page.

To solve this problem, set the onclick event that returns true or false for the hyperlink based on the current execution context. In the following code, set the value of the global Microsoft JScript variable to true or false according to the button click. The DISABLED property of the target hyperlink object is updated so that it can properly communicate its DISABLED state, other objects, and write functionality on the script 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/" rel="external nofollow" rel="external nofollow" onclick="return canNavigate();">Click here</a><p> 
<button id=btn1 onclick="setNavigate(document.all('lnk1'), !(canNav));updateBtnStatus('btn1');"> 
</button> 
</body> 
</html>
Related articles: