Link Enable/Disable

Putting "disabled" in a link does not do anything, other than gray out the links text in IE, the link and any onclick event still work.

This LINK < href="page.htm" disabled>LINK</a> is supposed to be disabled

To disable the default action of the link you need to add return false to an onclick event within the link

This LINK < href="page.htm" disabled onclick="return false">LINK</a> is disabled

You can use a script to dynamically change the disabled status of the link.

Enable Link 1
Enable Link 2

 Link 1
Link 2
Link 3

In my example above, when the page has loaded the script looks through all the links in the page for those that contain the class name "disabled", and disables those links, you can then toggle those links between the disabled and enabled state.

<style type="text/css">
.disabled{
text-decoration:line-through;
color:red
}
</style>

The link(s) are coded into the page as normal and includes the class "disabled". The "disabled" css rule makes sure the link displays the same, adding the strike through effect, in both browsers.

Here's a few more examples:

This Test Link 1 will be disabled when it has been clicked allowing the link only to be used once

<script type="text/javascript">
function test(id){
document.getElementById(id).onclick = function(){return false}
document.getElementById(id).className="disabled"
}
</script>

<a id="testlink" href="javascript:alert('This link is now disabled\n\nRefresh the page to use again')" onclick="test(this.id)">Test Link 1</a>

This Test Link 2 is disabled, when this Keyword is been clicked the link will be enabled

<a id="testlink2" href="javascript:alert('Hey! I\'m enabled\n\nRefresh the page to see again')" onclick="return false" class="disabled">Test Link 2</a>

<a href="javascript:alert('Test Link 2 is now enabled')" onclick="document.getElementById('testlink2').onclick = function(){return true};document.getElementById('testlink2').className=''">Keyword</a>

The following example link will be enabled on mouseout
Move your mouse over the link and click away, when you're ready move your mouse off the link to enable it, then go back and click it.

Disabled

<script type="text/javascript">
function test2(id){
document.getElementById(id).onclick = function(){return true}
document.getElementById(id).className=""
document.getElementById(id).innerHTML="Enabled"
}
</script>

<a id="testlink3" href="javascript:alert('This link is now enabled\n\nRefresh the page to see again')" onclick="return false" onmouseout="test2(this.id)" class="disabled">Disabled</a>

How the link(s) are disabled/enabled is your preference but the basics are as follows:

Give the link an ID

To disable a link use

document.getElementById(id).onclick = function(){return false} // cancel default action of the link

To re-enable the link use

document.getElementById(id).onclick = function(){return true}

If the link is being used to run a function that function would normally be assigned to the onclick event but when you dynamically assign an onclick event to the link it over-rides any previous onclick event so to run the function you put it in the href as "javascript:functionName()"