...

View Full Version : Checkbox Disabled Help



rfresh
05-16-2009, 11:52 PM
I'm setting a checkbox to disabled but only the checkbox itself is getting disabled - what I want to also do is change the checkbox text to color #808080 but .style.color = "#808080" does nothing. How can I also 'disable' the text label?

Thanks...

Old Pedant
05-17-2009, 12:40 AM
Checkboxes don't *HAVE* labels unless you put them there.

So if you have a <label> tag, the style change should go on it.

You *can* change the backgroundColor of a checkbox, too, which you may care to play with.

Philip M
05-17-2009, 08:51 AM
This may be of use to you:-



<script type = "text/javascript">

function changecolor() {
if (document.myform.chk1.checked) {
document.getElementById('spn1').style.backgroundColor='green';
}
else {
document.getElementById('spn1').style.backgroundColor='red';
}
}

</script>

<form name = "myform">
I agree to accept the terms and conditions <span id="spn1" style='background-color: red;'>
<input type="checkbox" name = "chk1" onclick="changecolor()" ></span>
</form>


This changes the check mark to green. Works in IE and FF.

rfresh
05-17-2009, 11:06 PM
Perhaps the term label was not a good choice of words. The checkbox title (?) is "Create backup files" and thats what I'm trying to control the color of.



<INPUT TYPE="checkbox" NAME="chk_create_backup_files"> Create backup files

adios
05-17-2009, 11:38 PM
Either way, you need to get that text node's parent to fiddle with its styles. Using labels for form elements is good practice; if you're unable, or uninterested, wrap the text in a span, id it, and use getElementById. Otherwise:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>
<style type="text/css">

.disabled {
font:bold 12px arial;
color: #808080;
}
.enabled {
font:bold 12px arial;
color: #eeaaaa;
}
</style>
<script type="text/javascript">

function disable()
{
var el = document.getElementById('someID');
if (el)
{
el.disabled = !el.disabled;
el.parentNode.className = el.disabled ? 'disabled' : 'enabled';
}
}

</script>
</head>
<body>
<form>
<input type="button" value=" test " onclick="disable()" />
<label class="enabled" for="someID">
<input id="someID" type="checkbox" name="chk_create_backup_files">
Create backup files</label>
</form>
</body>
</html>

http://webdesign.about.com/od/forms/a/aa052206.htm



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum