Heim > Artikel > Web-Frontend > 使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法_javascript技巧
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法_javascript技巧
- WBOYOriginal
- 2016-05-16 15:39:171953Durchsuche
今天工作中遇到个小问题，情况如下，当我在后台页面中设置Checkbox的Enable的值为false时，我在前端页面中使用脚本(chk.disabled = false)，无法改变disabled的值为false，代码如下：
前台代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function foo() {
var chk = document.getElementById("<%=chkBlog.ClientID %>");
if (chk.disabled) {
chk.disabled = false;
}
else {
chk.disabled = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="chkBlog" runat="server" Text="http://owen-zhang.cnblogs.com"></asp:CheckBox>
<asp:Button ID="btnCheck" runat="server" Text="Client check" OnClientClick="foo();return false;" />
</div>
</form>
</body>
</html>
后台代码：
protected void Page_Load(object sender, EventArgs e)
{
this.chkBlog.Enabled = false;
}
为什么会出现这种情况呢，让我们看一下html的源码，如下：
<span disabled="disabled"> <input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" /> <label for="chkBlog">http://owen-zhang.cnblogs.com</label> </span>
原来Checkbox控件在Enable属性为false时，输出到Html中变成了一组控件(element)，而不是我们预想的一个控件。
方案一：
在上面的代码中，虽然我们改变了chkBlog控件的disabled属性为false，但是chkBlog控件的父节点()的disabled属性却还是disabled。这个就有一个优先级的问题了，一般是父节点的优先级要大于子节点，所以，我们要改变父节点的disabled的值，上面的客户端脚本代码要做一点小的修改，如下：
<script type="text/javascript">
function foo() {
var chk = document.getElementById("<%=chkBlog.ClientID %>");
if (chk.disabled) {
chk.parentNode.disabled = false;
chk.disabled = false;
}
else {
chk.parentNode.disabled = true;
chk.disabled = true;
}
}
</script>
只有加上上面高亮显示的代码。
方案二：
使用方案一的话，就必须添加一条额外的改变父节点disabled属性的语句，当要修改的地方比较多的时候，就比较麻烦了，而且也不符合一般的代码逻辑，有冗余的代码。有没有其他更简练的办法呢？有～，我们只需要修改后台代码，如下：
protected void Page_Load(object sender, EventArgs e)
{
this.chkBlog.InputAttributes.Add("disabled", "disabled");
}
也就是，我们不改变Checkbox的Enable属性，而是通过InputAttributes中的属性设置，改变了Checkbox输出到客户端的Html内容，如下：
<input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" /> <label for="chkBlog">http://owen-zhang.cnblogs.com</label>
之前“冗余的”父节点，现在没有了。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery实现可展开合拢的手风琴面板菜单_jqueryNächster Artikel：jquery带有索引按钮且自动轮播切换特效代码分享_jquery