Weird checkbox behavior (looks disabled but can still click on it)

[David Wake]

I have two radio buttons and two checkboxes in a form.

I'm trying to write some code so that when a radio button is selected,
its corresponding checkbox is disabled.

My code looks like this:

function radioClicked(index)
{
document.table_config_form.my_checkbox[index].disabled = true;
}

function radioChanged(index)
{
document.table_config_form.my_checkbox[index].disabled = false;
}
The radios' onClick calls radioClicked() with the appropriate index.
The radios' onChange calls radioChanged() with the appropriate index.

It works fine in every respect except one: When the checkbox is
"disabled", it looks grayed out. However, when the user clicks on the
"disabled" checkbox, it behaves just like an enable checkbox! It
immediately goes back to white and a check appears in the checkbox.

If I eliminate the radioChanged() function, however, the disabled
checkboxes behave propertly.

I'm using IE 6.0 on W2K.

Many thanks for any suggestions,

David

[Thomas 'PointedEars' Lahn]

David Wake wrote:

I have two radio buttons and two checkboxes in a form.

I'm trying to write some code so that when a radio button is selected,
its corresponding checkbox is disabled.

My code looks like this:

function radioClicked(index)
{
document.table_config_form.my_checkbox[index].disabled = true;
You want to use
document.forms['table_config_form'].elements['my_checkbox'][index].disabled
= ...

instead, but much better it would be if you pass a reference to the element
collection to the method and not only the index of the element you want to
access. This allows the method for general use:

function disableElementOfGroup(oElementGroup, index)
{
if (typeof index == "undefined")
index = 0;

if (oElementGroup
&& oElementGroup[index]
&& typeof oElementGroup[index].disabled != "undefined")
oElementGroup[index].disabled = true;
}

<form name="table_config_form">
...
<input type="radio" name="foobar" value="1"
onclick="disableElementOfGroup(this.form.elements['myCheckBoxes'], 1)">
...
</form>
}

function radioChanged(index)
{
document.table_config_form.my_checkbox[index].disabled = false;
}
For the code of the two methods above is identical but the assigned value,
it is possible to add another argument and use ony one method instead:

function setGroupElDisabled(oElementGroup, index, bDisabled)
{
if (typeof index == "undefined")
index = 0;

if (oElementGroup
&& oElementGroup[index]
&& typeof oElementGroup[index].disabled != "undefined")
oElementGroup[index].disabled =
(typeof bDisabled != "undefined"
? bDisabled
: true);
}

<form name="table_config_form">
...
<input type="radio" name="foobar" value="1"
onclick="setGroupElDisabled(this.form.elements['myCheckBoxes'], 1,
true)">
...
</form>

You should also check if it is necessary that two or more checkboxes need
to have the same name, as with a unique name referencing is much easier:

function setDisabled(oElement, bDisabled)
{
if (oElement && typeof oElement.disabled != "undefined")
oElement.disabled =
(typeof bDisabled != "undefined"
? bDisabled
: true);
}

<form name="table_config_form">
...
<input type="radio" name="foobar" value="1"
onclick="setDisabled(this.form.elements['myCheckBox'], true)">
...
</form>
The radios' onClick calls radioClicked() with the appropriate index.
The radios' onChange calls radioChanged() with the appropriate index.
You need not to provide both event handlers, `onclick' is enough. But
you need to disable the first checkbox(es) in the `onclick' handler of
the second radio button and vice-versa.
It works fine in every respect except one: When the checkbox is
"disabled", it looks grayed out. However, when the user clicks on the
"disabled" checkbox, it behaves just like an enable checkbox!

It is a bug both in your code and in your UA.

Selecting the radiobutton, `onclick' fires and the checkbox is disabled.
Selecting the checkbox, the radio button loses focus (is changed), its
`onchange' handler fires and the checkbox is re-enabled again. (That's
the code issue, see above.)

Tested with IE 6 (SP1;Q330994;Q822925;Q828750) and Mozilla/5.0 (rv:1.5),
while Mozilla (in contrast to IE) correctly _not_ focuses the _disabled_
checkbox and so the `onchange' handler of the radio button doesn't fire.
(That's the UA issue.)
F'Up2 comp.lang.javascript

PointedEars