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?
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?
Share Improve this question edited Mar 14, 2012 at 7:20 Cheran Shunmugavel 8,4591 gold badge35 silver badges40 bronze badges asked Mar 13, 2012 at 20:33 RayRay 1,4422 gold badges21 silver badges39 bronze badges2 Answers
Reset to default 4Add the disabled attribute to the InputAttributes
of the CheckBox
instead:
CheckBox1.InputAttributes.Add("disabled", "disabled");
http://geekswithblogs/jonasb/archive/2006/07/27/86498.aspx
The problem is that an <asp:checkbox />
control gets rendered out like this:
<span><input type='checkbox'></span>
The real problem es when you have a checkbox like this: <asp:CheckBox Enabled="false"/>
.
This gets rendered out like this:
<span disabled='disabled'><input type='checkbox' disabled='disabled'></span>
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"