checkbox控件的enable,disabled,以及与前台js的交互控制
2011-06-16 09:57
369 查看
往往有这样的场景,两个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
昨天的工作中我就遇到这样的怪事,安全起见,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
相关文章推荐
- checkbox控件的enable,disabled,以及与前台js的交互控制
- javascript控制服务器控件-js操作CheckBoxList实现全选、反选
- ComponentArt.UI 2008-TreeView控件控制CheckBox全选与反选,以及读取Xml权限
- js调用.net后台事件、后台调用前台以及js调用服务器控件
- js一键控制checkBox正反选以及随着变化取消全选状态
- c# webform js文件获取客户端控件,后台cs获取前台客户端控件的值,c#和js的交互
- JS控制TreeView的CheckBox控件的全选与全不选脚本
- js调用.net后台事件,和后台调用前台等方法以及js调用服务器控件的方法
- js调用.net后台事件,和后台调用前台等方法以及js调用服务器控件的方法
- 前台JS控制。net后台checkbox
- javascript控制服务器控件-js操作CheckBoxList实现全选、反选
- js_前台页面如何设置radio、checkbox、select三者的值以及绑定事件,方便后台接收数据
- 用js控制.net的checkbox控件的颜色
- js控制gridview 中的checkbox 全选
- js控制input type=checkbox 的勾选
- asp.net中后台c#数组与前台js数组交互
- 【简单】js控制CheckBox全选/全不选
- c#调用js,以及js调用C#里的函数, c#自己生成js代码,实现对web的控制
- php控制checkbox JS焦点控制
- Android的控件CheckBox、ImageView以及ListView的自定义Adapter用法