View Full Version : Checkbox Disabled Help

05-17-2009, 12:52 AM
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?


Old Pedant
05-17-2009, 01: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, 09:51 AM
This may be of use to you:-

<script type = "text/javascript">

function changecolor() {
if (document.myform.chk1.checked) {
else {


<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>

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

05-18-2009, 12:06 AM
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

05-18-2009, 12:38 AM
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"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

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

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

<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>