最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

why wont javascript "checkbox.disable" grey out associated label in ASP.NET? - Stack Overflow

programmeradmin0浏览0评论

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 badges
Add a ment  | 

2 Answers 2

Reset to default 4

Add 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"

发布评论

评论列表(0)

  1. 暂无评论