checkbox控件的enable,disabled,以及与前台js的交互控制

往往有这样的场景，两个checkbox，当checkbox1选中的情况下checkbox2的才可用，checkbox2的这个“可用”在服务端的代码为checkbox2.Enabled=true，而在生成的html代码中为checkbox2.disabled=false。

昨天的工作中我就遇到这样的怪事，安全起见，checkbox2的“不可用”状态是我在后台这样子

checkbox2.Attributes.Add(”disabled”, “true”)

前台的js代码大致如下

if(checkbox1.checked==true)

{

checkbox2.disabled=false;

}

else

{

checkbox2.disabled=true;

}

结果我发现我的js代码不起作用，但是并没有页面提示说我的js代码错误，这就奇怪了，为什么正确的代码却不起作用呢，凭经验，马上查看页面源文件，我发现，等我设置了checkbox2.Attributes.Add(”disabled”, “true”)后，生成的checkbox2的html代码大概是这样的<span disabled=”true”><input type=checkbox…..<lable for=”checkbox2″ /></span>哦，这样一下子都明白了，和着它把checkbox外面套了一层<span>啊，而且这个<span>没有ID，好了，明白了原因后就好处理了，解决方法是：

if(checkbox1.checked==true)

{

checkbox2.parentElement.disabled=false;

}

else

{

checkbox2.parentElement.disabled=true;

}

也就是直接操作checkbox2的父元素就可以了，现在想想M$为什么这么做，为什么在checkbox外套一层<span>，我想大概是这个原因，大家知道<lable>标签只要加上for属性，那么这个标签就和它for的对象关联上了，这样你你在<lable>标签上点击，实际上也是在for的对象是点击，此例中就是这个checkbox，如果你M$仅仅在<checkbox>里加上disabled=true属性，那么只要点了<lable>，还是相当于点了checkbox，明白了，所以M$干脆就来一狠的，直接在<checkbox>和<lable>外套上了个<span>并且设置这个<span>的disabled=true，这样就达到整个checkbox“不可用”的效果了，注意，此时虽然<span> 的属性为disabled=true,但是<checkbox>和<lable>均没有设置此属性，所以我修改过的代码才仅仅需要处理checkbox的parentElement就可以了，于是我又做了一个试验，我在后台这样做

checkbox2.Enabled=Flase

马上，我在生成的html里发现，这次是<span disabled=”disabled”><input type=checkbox disabled=”disabled”>，这次不仅更改了disabled=”true” 变为disabled=”disabled”,而且在span和checkbox里都加上了disabled属性，有了上次的经验，处理这个就比较简单了:

if(checkbox1.checked==true)

{

chckbox2.disabled=”";

checkbox2.parentElement.disabled=”";//注意赋值字符串为空而不是设置一个true

}

else

{

chckbox2.disabled=”";

checkbox2.parentElement.disabled=”disabled”;

}

来源：http://blog.csdn.net/hzfu007/archive/2009/03/17/3998862.aspx