使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法


Posted in Javascript onSeptember 16, 2015

 今天工作中遇到个小问题,情况如下,当我在后台页面中设置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控件的父节点(<span>)的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>

之前“冗余的”父节点,现在没有了。

Javascript 相关文章推荐
JavaScript全局函数使用简单说明
Mar 11 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 #Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 #Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 #Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 #Javascript
jQuery实现图片轮播特效代码分享
Sep 15 #Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 #Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 #Javascript
You might like
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
基于jquery实现五星好评
2017/11/18 jQuery
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用scrapy解析js示例
2014/01/23 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python调用百度语音识别api
2018/08/30 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
如何强制垃圾回收
2015/10/06 面试题
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
村级个人对照检查材料
2014/08/22 职场文书
公司员工安全协议书
2014/11/21 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
mysql如何查询连续记录
2022/05/11 MySQL