为什么 ASP.NET 中的 javascript"checkbox.disable" 关联标签不会变灰？

Question

我正在使用一些 javascript 来禁用复选框列表中的复选框，如下所示：

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

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

这段代码工作正常，但是当页面在 IE 中呈现时，复选框的文本属性呈现为标签，因此只有复选框似乎变灰，而不是复选框和文本。

如果我简单地设置

Enabled = false

在 .aspx 代码隐藏中，它使所有内容变灰，但无法（使用我当前的方法）重新启用 CB 并取消标签变灰。

谁能告诉我如何解决这个问题并帮助我理解为什么会这样？

Answer 1

改为将 disabled 属性添加到CheckBox 的InputAttributes：

CheckBox1.InputAttributes.Add("disabled", "disabled");

http://geekswithblogs.net/jonasb/archive/2006/07/27/86498.aspx

问题是<asp:checkbox /> 控件呈现如下：

<span><input type='checkbox'></span>

真正的问题是当你有这样一个复选框时：<asp:CheckBox Enabled="false"/>。

这样渲染出来的：

<span disabled='disabled'><input type='checkbox' disabled='disabled'></span>

Answer 2

如果您查看复选框控件的 HTML 输出，您会看到关联的 <label for="checkbox_client_id">Text</label> - 这就是为什么将复选框设置为禁用不会使文本变灰的原因。

从 IE 查看页面时，ASP.NET 将 <input> 和关联的 <label> 与 <span disabled="disabled"> 包装起来。 IE 将禁用 span 内的所有元素，这就是它禁用复选框和标签的原因。

但是，由于 span 不是表单元素，因此大多数其他浏览器都遵循W3C rules 并忽略它的“禁用”属性。禁用复选框周围的跨度仅适用于 IE。

我能想到的最简单的解决方案是手动复制此行为。用 span 包裹复选框，然后在启用/禁用复选框时使用 CSS 设置 span 样式并在所有浏览器上获得所需的效果。

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";
}

附：对不起，如果我听起来很尖刻 - IE 总是因为它无休止的“错综复杂”而惹恼我