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

今天工作中遇到个小问题，情况如下，当我在后台页面中设置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>

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

赞 (0)

相关推荐

  • javascript使用shift+click实现选择和反选checkbox的方法

    本文实例讲述了javascript使用shift+click实现选择和反选checkbox的方法.分享给大家供大家参考.具体实现方法如下: var lastChecked = null; var handleChecked = function(e) { if(lastChecked && e.shiftKey) { var i = $('input[type="checkbox"]').index(lastChecked); var j = $('input[type

  • jquery判断至少有一个checkbox被选中的方法

    本文实例讲述了jquery判断至少有一个checkbox被选中的方法.分享给大家供大家参考.具体实现方法如下: html代码部分: <form> <!-- bunch of checkboxes like: --> <input type="checkbox" ... > <input type="checkbox" ... > <!-- submit button, defaults to disabled -

  • javascript使用avalon绑定实现checkbox全选

    javascript使用avalon绑定实现checkbox全选

    duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅.下面随便演示一个常见的checkbox全选. 要求:(老掉牙了,还是说一下) 1.勾选了全选框后,下面的子选框全被勾选:没勾选全选框,则子选框全部不勾选 2.子选框如果有一个未勾选,则取消全选框勾选: 3.子选框全部勾选,则勾选全选框 <!DOCTYPE html> <html> <head> <meta http-equiv="Co

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

    今天工作中遇到个小问题,情况如下,当我在后台页面中设置Checkbox的Enable的值为false时,我在前端页面中使用脚本(chk.disabled = false),无法改变disabled的值为false,代码如下: 前台代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script

  • ASP.NET中 ObjectDataSource控件的DataObjectTypeName属性

    一.ObjectDataSource 控件说明 获取或设置某个类的名称,ObjectDataSource 控件将该类用于更新.插入或删除数据操作中的参数,而不是从数据绑定控件传递个别的值. 您不用指定传递给 Update.Insert 和 Delete 方法的多个参数,而是可以创建一个累计多个数据字段值的对象.仅给方法传递这一个对象,而不是多个参数. 绑定到数据绑定控件的 ObjectDataSource 控件的默认行为是,数据绑定控件为数据源中的每个参数创建一个 Parameter 对象.如果

  • 灵活掌握asp.net中gridview控件的多种使用方法（上）

    灵活掌握asp.net中gridview控件的多种使用方法（上）

    灵活使用asp.net中gridview控件的方法有很多种,本文内容很富,希望大家都能有所收获. 1.GridView无代码分页排序: 效果图: 小提示: 1.AllowSorting设为True,aspx代码中是AllowSorting="True": 2.默认1页10条,如果要修改每页条数,修改PageSize即可,在aspx代码中是PageSize="12". 3.默认的是单向排序的,右击GridView弹出"属性",选择AllowSort

  • ASP.NET中验证控件的使用方法

    ASP.NET中验证控件的使用方法

    对于这些常用的控件有效性验证,在Asp.Net中有单独的验证控件可供使用.他们可以满足一般的,诸如非空,范围.比较等的验证,为用户登录页面添加输入数据验证功能和验证码功能. 验证控件: Asp.Net中内置的验证控件有:RequiredFieldValidation.RangeValidation.RegularExpressValidation.CompareValidation.CustomValidation和ValidationSummary等六种.其中用户自定义验证控件,由于并不非常常

  • 灵活掌握asp.net中gridview控件的多种使用方法（下）

    灵活掌握asp.net中gridview控件的多种使用方法（下）

    继续上篇文章的学习<灵活掌握asp.net中gridview控件的多种使用方法(上)>,在此基础上巩固gridview控件的操作使用,更上一层楼. 11.GridView实现用"..."代替超长字符串: 效果图: 解决方法:数据绑定后过滤每一行即可 for (int i = 0; i <= GridView1.Rows.Count - 1; i++) { DataRowView mydrv; string gIntro; if (GridView1.PageIndex

  • ASP.NET中日历控件和JS版日历控件的使用方法（第5节）

    ASP.NET中日历控件和JS版日历控件的使用方法（第5节）

    今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一  Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个

  • ASP.NET中Label控件用法详解

    ASP.NET中Label控件用法详解

    Label 控件提供了一种在 ASP.NET 网页中以编程方式设置文本的方法.当希望在运行时更改网页中的文本(比如响应按钮单击)时,通常可以使用 Label 控件. 一.属性 Label控件的常用属性及说明如表1所示. 表1 Label控件常用属性及说明 属性 说明 ID 控件的ID名称 Text 控件显示的文本 Width 控件的宽度 Visible 控件是否可见 CssClass 控件呈现的样式 BackColor 控件的背景颜色 Enabled 控件是否可用 下面详细介绍Label控件的一

  • ASP.NET中repeater控件用法实例

    本文实例讲述了ASP.NET中repeater控件用法.分享给大家供大家参考.具体实现方法如下: repeater绑定数据: 复制代码 代码如下: protected void Page_Load(object sender, EventArgs e) {         if(!IsPostBack)             BindStudent(); } private void BindStudent() {         string str = ConfigurationManag

  • ASP.NET中 PlaceHolder 控件的使用方法

    使用 PlaceHolder 控件可以将空容器控件放到网页中,然后在运行时动态添加.删除或遍历各子元素.该控件只呈现其子元素:它本身并没有基于 HTML 的输出. 在实际使用过程中可以向PlaceHolder添加任何Html控件,甚至包括JavaScript代码. 将 PlaceHolder 控件用作存储动态添加到网页的服务器控件的容器.PlaceHolder 控件不产生任何可见输出并且只能用作网页上其他控件的容器.可以使用 Control.Controls 集合添加.插入或移除 PlaceHo

  • ASP.NET 中ImageMap控件的用法

    利用 ASP.NET ImageMap 控件可以创建一个图像,使其包含许多可由用户单击的区域(热区),这些区域称为"作用点".每一个作用点都可以是一个单独的超链接或回发事件. 常用属性: HotSpotMode属性 HotSpotMode属性用于获取或设置单击热点区域后的默认行为方式. ImageMap控件的HotSpotMode属性的枚举值如下表所示: 枚举值 说明 Inactive 无任何操作,即此时就像一张没有热点区域的普通图片 NotSet 未设置项,同时也是默认项.虽然名为未

随机推荐