为什么不会在ASP.NET中使用javascript“checkbox.disable”灰色关联标签?

时间:2012-03-13 20:33:57

标签: javascript asp.net .net checkbox

我正在使用一些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并取消灰色标签。

有人能告诉我如何解决这个问题并帮助我理解为什么会这样做吗?

2 个答案:

答案 0 :(得分:4)

将已禁用的属性添加到CheckBox的{​​{3}},而不是:

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

InputAttributes

问题是<asp:checkbox />控件的渲染方式如下:

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

当你有一个像这样的复选框时,真正的问题出现了:<asp:CheckBox Enabled="false"/>

这会像这样呈现出来:

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

答案 1 :(得分:2)

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

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

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

我能想到的最简单的解决方案是手动复制此行为。用一个范围包装复选框然后,当启用/禁用复选框时,使用CSS来设置范围的样式并获得所需的效果以适用于所有浏览器。

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。对不起,如果我听起来很讽刺 - IE总是让我感到厌烦,这是无穷无尽的“错综复杂”