Will’s Blog

Now this is very strange.

Well, it seemed that way at first anyway

Assume you have declared in your ASP.NET page some web controls as below:

<asp:checkbox id="chkFirstCheck" runat="server" textalign="Left" text="Check me first!" />
<br />
<asp:checkbox id="chkSecondCheck" runat="server" textalign="Left" text="I'm second!!!" enabled="false" />

And also there is a bit of JavaScript on the ASP.NET page that looks like this:

<script language="javascript">
function getObj(name)
{
/* DHTML Micro API
* Source: http://www.quirksmode.org/js/dhtmloptions.html
*/
if (document.getElementById) // test if browser supports document.getElementById
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all) // test if browser supports document.all
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers) // test if browser supports document.layers
{
this.obj = document.layers[name];
this.style = document.layers[name].style;
}
}

function checkedChanged()
{
var firstCheck = new getObj('chkFirstCheck');
var secondCheck = new getObj('chkSecondCheck');

if (firstCheck.obj.checked == true)
{
secondCheck.obj.disabled = false;
}
else
{
secondCheck.obj.disabled = true;
secondCheck.obj.checked = false; // if the secondCheck is disabled, then it should not be checked
}
}
</script>

In the code behind, for the ASP.NET page, in your Page_Load, you’d probably be attaching Javascript to the checkboxes, as below:

chkFirstCheck.Attributes.Add("onclick", "checkedChanged();")

Ok, now what is the expected behaviour?

I’d say the expected behaviour would be, you check the first check box, and the second one should be enabled, which then allows you to be able to check the second one.

Right?

Actually, very wrong.

If you actually looked at the source code produced by ASP.NET, you’d most likely come across something similar to the below:

<label for="chkFirstCheck">Check me first!</label><input id="chkFirstCheck" type="checkbox" onclick="checkedChanged();" />
<br />
<span disabled="disabled">
<label for="chkSecondCheck">I'm second!!!</label>
<input id="chkSecondCheck" type="checkbox" disabled="disabled"/>
</span>

The major problem that you will likely come across is with the <span disabled=”disabled”>.

It will disable the entire element. Our JavaScript will only enable the checkbox, but there is also another <span> tag in there that is disabled.

The SPAN tag encapsulates the label and input tags inside it, as it is the parent tag.

So what we actually require is a way of enabling and disabling the parent SPAN tag.

After doing a bit of googling, I came across this post by Andrew Connell.

It looked like what I needed, but I made some adjustments to fit my requirements.

So what was needed was two extra lines of JavaScript.

Inside of the if statement, put the below:
secondCheck.obj.parentNode.disabled = false;

And, inside the else statement, add the below:
secondCheck.obj.parentNode.disabled = true;

Note that I use parentNode rather than parentElement.disabled in the above code, as parentElement.disabled will not work in Firefox.

To get the above to work in IE4, you’ll need parentElement rather than parentNode.

So you can adjust the DHTML micro API to fit this by adding the below code to the first if block.
this.parent = document.getElementById(name).parentNode;

And, to the second if block…
this.parent = document.all[name].parentElement;

And to the final one…
this.parent = document.layers[name].parentNode;

So your final JavaScript block should look like the below (including the parent addition to the DHTML micro API, with all additions in bold):
<script language="javascript">
function getObj(name)
{
/* DHTML Micro API
* Source: http://www.quirksmode.org/js/dhtmloptions.html
*/
if (document.getElementById) // test if browser supports document.getElementById
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
this.parent = document.getElementById(name).parentNode;
}
else if (document.all) // test if browser supports document.all
{
this.obj = document.all[name];
this.style = document.all[name].style;
this.parent = document.all[name].parentElement;
}
else if (document.layers) // test if browser supports document.layers
{
this.obj = document.layers[name];
this.style = document.layers[name].style;
this.parent = document.layers[name].parentNode;
}
}

function checkedChanged()
{
var firstCheck = new getObj('chkFirstCheck');
var secondCheck = new getObj('chkSecondCheck');

if (firstCheck.obj.checked == true)
{
secondCheck.obj.disabled = false;
secondCheck.parent.disabled = false;
}
else
{
secondCheck.obj.disabled = true;
secondCheck.parent.disabled = true;
secondCheck.obj.checked = false; // if the secondCheck is disabled, then it should not be checked
}
}
</script>

Note that you do not need to use the QuirksMode DHTML micro API if you don’t want to, you can adjust the above to your needs using just getElementById, which most modern browsers support.

This entry was posted on Thursday, February 17th, 2005 at 02:34 pm and is filed under .NET, General, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.