使用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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
javascript闭包的理解
Apr 01 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
Vue自动构建发布脚本的方法示例
Jul 24 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
详解PHP队列的实现
2019/03/14 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
js中的string.format函数代码
2020/08/11 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python 的描述符 descriptor详解
2016/02/27 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python类装饰器实现方法详解
2018/12/21 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
考研经验交流会策划书
2015/11/02 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL