Why is wont javascript "checkbox.disable" grayed out to associate a label in ASP.NET?
I am using javascript to disable checkboxes in checkboxlist like this:
var objItem = document.getElementById("<%= resCBL.ClientID %>");
var checkBoxes = objItem.getElementsByTagName("input");
if (form1.secTB.value == 0) {
checkBoxes[0].disabled = true;
This code works great, but when the page is rendered in IE, the text attribute for that checkbox is displayed as a label, and so only the checkbox appears grayed out, not the checkbox AND text.
If I just installed
Enabled = false
in the .aspx codebehind, it highlights everything but makes it impossible (with my current method) to re-enable CB and not greyed out the label.
Can anyone tell me how to get around this and help me understand why he is doing this?
source to share
If you look at the HTML output from the checkbox control, you can see that there is an associated one <label for="checkbox_client_id">Text</label>
- which is why setting the checkbox as disabled does not gray out the text.
When viewing a page from IE ASP.NET wraps <input>
and associated <label>
with using <span disabled="disabled">
. IE will disable all elements within the range, which is why it disabled the checkbox and label.
However, since span is not a form element, most other browsers follow W3C rules and ignore the "disabled" attribute. Disabling fly-around checkbox will only work in IE.
The easiest solution I can think of is to repeat this behavior manually. Check the box with a range, then when enable / disable the checkbox uses CSS to style the range and get the desired effect to work in 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";
}
PS Sorry if I sound snarky - IE always annoys me with it endless "subtleties"
source to share
Add the disabled attribute to InputAttributes
instead CheckBox
:
CheckBox1.InputAttributes.Add("disabled", "disabled");
http://geekswithblogs.net/jonasb/archive/2006/07/27/86498.aspx
The problem is that the control <asp:checkbox />
gets rendered like this:
<span><input type='checkbox'></span>
The real problem arises when you have a check box: <asp:CheckBox Enabled="false"/>
.
It will look like this:
<span disabled='disabled'><input type='checkbox' disabled='disabled'></span>
source to share