使用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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
Python中列表(list)操作方法汇总
2014/08/18 Python
python获取本机外网ip的方法
2015/04/15 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python实现八皇后问题示例代码
2018/12/09 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
大学自荐信
2013/12/12 职场文书
给老师的感谢信
2015/01/20 职场文书
岳麓书院导游词
2015/02/03 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
党员转正介绍人意见
2015/06/03 职场文书
新年寄语2016
2015/08/17 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript