使用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 相关文章推荐
JQquery的一些使用心得分享
Aug 01 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP的自定义模板引擎
2017/03/24 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP学习笔记之session
2018/05/06 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python实现超市商品销售管理系统
2019/11/22 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
django有哪些好处和优点
2020/09/01 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
小学国庆节活动方案
2014/02/11 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
二手房购房协议书范本
2014/10/05 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL