...

View Full Version : disable link on load **help**



JayStang
05-25-2006, 02:34 PM
right now i have a link that i want disabled on load and enabled when a checkbox is clicked. Currently i'm using "disable" which only grays out the link but it can still be clicked. My code for that is as follows



<script>
function start() {
document.getElementById('OnDate1_link').disabled = true;
}

onload = start;
</script>


i would like it to be grayed but also have the link removed so it can't be clicked. any help would be great.

~Jamie

Bill Posters
05-25-2006, 02:49 PM
Do I take it that the link is a button (rather than a regular text link)?

css


.hide {
display: none; /* or visibility: hidden; */
}

js

<script type="text/javascript">

function preHide() {
document.getElementById('OnDate1_link').className = 'hide';
}

window.onload = preHide;

</script>

To 'unhide' it, simply set the object's className to nothing…

e.g.

document.getElementById('OnDate1_link').className = '';
(It's generally more reliable than using removeAttribute().)

Kor
05-25-2006, 03:00 PM
You may play with return false, return true




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function activLink(b){
document.getElementById('mylink').onclick=function(){return b}
}
</script>
</head>
<body>
<input type="checkbox" onclick="activLink(this.checked)">
<a id="mylink" href="http://www.google.com" onclick="return false">link</a>
</body>
</html>

JayStang
05-25-2006, 03:01 PM
it is in fact a text link and not a button. The code you posted looked like it would work but it would remove the link all together. I'm looking for the Text of the link to still stay there.. but the link itself to be disable (meaning grayed out and unclickable) it that makes any sence.

Kor
05-25-2006, 03:10 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function activLink(b){
document.getElementById('mylink').onclick=function(){return b}
document.getElementById('mylink').disabled=!b
}
</script>
</head>
<body>
<input type="checkbox" onclick="activLink(this.checked)">
<a id="mylink" href="http://www.google.com" onclick="return false" disabled="true">link</a>
</body>
</html>

Kor
05-25-2006, 03:18 PM
Moz will not take the disabled attribute, but you may use a style color, something like that, to make it look the same in all browsers

Bill Posters
05-25-2006, 04:04 PM
Moz will not take the disabled attribute…
Fwiw, neither will the validator, if you get my drift.
I'd recommend against using it at all, even if IE does support that attribute on anchors.


you may use a style color, something like that, to make it look the same in all browsers

(rough) e.g.

a.disabled {
cursor: default;
color: #ccc;
text-decoration: none;
}



window.onload = function() {

activLink(false);

}

function activLink(b) {

var thisLink = document.getElementById('mylink');

thisLink.onclick = function() { return b }
thisLink.className = (b == true) ? '' : 'disabled';

}



<input type="checkbox" onclick="activLink(this.checked)"> Activate link<br>
<a href="http://www.google.com" id="mylink" onclick="return false;">link</a>

JayStang
05-25-2006, 04:20 PM
worked great... thanks guys!

Kor
05-25-2006, 04:21 PM
Exactly, Bill, this is why I have posted the last one, to indicate an on-the-fly solution instead of disabled, but I was too lazy to write the code... :-)

boxxer03
05-25-2006, 11:01 PM
You could try using the removeAttribute feature.


document.getElementById(id).removeAttribute("href");

and then use setAttribute to bring it back.


document.getElementById(id).setAttribute("href","http://www.google.com");



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum