使用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 相关文章推荐
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
详解Js模块化的作用原理和方案
Apr 29 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python异步存储数据详解
2019/03/19 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
药物学专业学生的自我评价
2013/10/27 职场文书
保护环境的建议书
2014/03/12 职场文书
小学作文评语大全
2014/04/21 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
辩护词范文大全
2015/05/21 职场文书
刑事附带民事代理词
2015/05/25 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android