Question

I’m using some javascript to disable the checkboxes in a checkboxlist like so:

        var objItem = document.getElementById("<%= resCBL.ClientID %>");
        var checkBoxes = objItem.getElementsByTagName("input");

        if (form1.secTB.value == 0) {
            checkBoxes[0].disabled = true;

This code works fine, but when the page renders in IE, the text attribute for the checkbox is rendered as a label, and so only the checkbox seems to grey out, instead of the checkbox AND the text.

If I simply set

Enabled = false

in the .aspx codebehind, it greys out everything, but makes it impossible (with my current method) to re-enable the CB and un-grey the label.

Could anyone tell me how to work around this and help me understand why it’s doing this?

Answer 1

If you look at the HTML output from a checkbox control you’ll see there is an associated <label for="checkbox_client_id">Text</label> – this is why setting the checkbox as disabled doesn’t grey-out the text.

When viewing the page from IE, ASP.NET wraps the <input> and associated <label> with <span disabled="disabled">. IE will disable all elements inside the span, which is why it disabled the checkbox and label.

However, since a span is not a form element, most other browsers follow the W3C rules and ignore the “disabled” attribute it. Disabling a span around the checkbox will only work in IE.

The easiest solution I can think of is to replicate this behavior manually. Wrap the checkbox with a span then, when enabling/disabling the checkbox use CSS to style the span and get the desired effect to work on all browsers.

var objItem = document.getElementById("<%= resCBL.ClientID %>");
var checkBoxes = objItem.getElementsByTagName("input");

if (form1.secTB.value == 0) {
    checkBoxes[0].disabled = true;
    checkBoxes[0].parentNode.class = "disabled";
}

P.S. Sorry if I sound snarky – IE always annoys me with it’s endless “intricacies”