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(in dex)
{
document.table_ config_form.my_ checkbox[index].disabled = true;
}

function radioChanged(in dex)
{
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]

Re: Weird checkbox behavior (looks disabled but can still click onit)

David Wake wrote:[color=blue]
> 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(in dex)
> {
> document.table_ config_form.my_ checkbox[index].disabled = true;[/color]

You want to use


document.forms['table_config_f orm'].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 disableElementO fGroup(oElement Group, index)
{
if (typeof index == "undefined" )
index = 0;

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

<form name="table_con fig_form">
...
<input type="radio" name="foobar" value="1"
onclick="disabl eElementOfGroup (this.form.elem ents['myCheckBoxes'], 1)">
...
</form>
[color=blue]
> }
>
> function radioChanged(in dex)
> {
> document.table_ config_form.my_ checkbox[index].disabled = false;
> }[/color]

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 setGroupElDisab led(oElementGro up, 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_con fig_form">
...
<input type="radio" name="foobar" value="1"
onclick="setGro upElDisabled(th is.form.element s['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(oEl ement, bDisabled)
{
if (oElement && typeof oElement.disabl ed != "undefined" )
oElement.disabl ed =
(typeof bDisabled != "undefined"
? bDisabled
: true);
}

<form name="table_con fig_form">
...
<input type="radio" name="foobar" value="1"
onclick="setDis abled(this.form .elements['myCheckBox'], true)">
...
</form>
[color=blue]
> The radios' onClick calls radioClicked() with the appropriate index.
> The radios' onChange calls radioChanged() with the appropriate index.[/color]

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.
[color=blue]
> 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![/color]

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;Q8 22925;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.javas cript

PointedEars