473,574 Members | 2,972 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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
Jul 20 '05 #1
1 6204
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(in dex)
{
document.table_ config_form.my_ checkbox[index].disabled = true;
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>
}

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

Jul 20 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
1919
by: Cheddar | last post by:
I'm back again with another problem. What I want is for the user to click a checkbox and have a list appear. I think the code is almost there but it doesnt seem to be working, grrrr. Can anyone help me out with it. Also is there a initial way to hide a list when the page is loaded? <html>
11
13676
by: Les Paul | last post by:
I'm trying to design an HTML page that can edit itself. In essence, it's just like a Wiki page, but my own very simple version. It's a page full of plain old HTML content, and then at the bottom, there's an "Edit" link. So the page itself looks something like this: <HTML><HEAD><TITLE>blah</TITLE></HEAD><BODY> <!-- TEXT STARTS HERE --> ...
1
5881
by: Jonathan Yong | last post by:
I observe a very weird behavior when dynamically create web control and bind events to it. Create a C# ASP.NET application, Put a PlaceHolder and Textbox onto the Web form, and try with the 4 code scenerio below. --------------------------------------------------------------------------- Scenerio 1
4
2467
by: RodBillett | last post by:
I have a situation where I have 3 checkboxes - and at least 1 needs to be selected at all times... I have implemented the code that allows this behavior to happen, BUT Viewstate gets all messed up. As long as none of the checkboxes are disabled, viewstate works fine - and client actions are 'remembered' after a postback. but when I have...
3
4483
by: Marc Castrechini | last post by:
I have a page that changes an <ASP:Checkbox value based on a user entered value in a textboxm using client side Javascript. After my submit is fired the value for the chkMyCB.checked does not get the latest value of the checkbox. Does this sound like a posibility and if so how can I force the server to get the new value from the page? ...
5
9155
by: Leo J. Hart IV | last post by:
Hello, I'm hoping someone can help me out. I was wondering if the Enabled property of a CheckBox or RadioButton server control is stored in the ViewState. If not, is there some way to to add this property to ViewState? If needed, I can give you more info on exactly what I'm trying to do. Thanks,
4
10405
by: Matrixreloadedth | last post by:
How to change disable color of Checkbox??? I have a checkbox with forecolor in red but when i disable by set Enable properties to false forecolor is changed to gray color but i don't want it. how to make disable color as the same before set enable = false Anyone can help me?????
8
4456
by: Sid | last post by:
I hope someone could help me with this. I am trying to setup a criteria to decide when to allow/not allow user to click on the check box. logically it looks simple but I am not able to incorporate in my data access page. I have a numerical field called tier status and right next to it I have a checkbox. I would like to allow user to...
3
1487
by: AshishMishra16 | last post by:
Hi Friends, What is the way to iterate the Table and Make all the input types editable on the click of a checkbox. Here is what My Requirement is : <table id="adSearchTable" cellspacing="3"> <thead> <tr class="tableheader" style="height: 15px;">
0
7805
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
8237
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
8098
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6454
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5622
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5301
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3741
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
2245
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1341
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.