脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法

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

 更新时间：2015年09月16日 10:46:39   投稿：mrr  
今天工作中遇到个小问题，情况如下，当我在后台页面中设置Checkbox的Enable的值为false时，我在前端页面中使用脚本(chk.disabled = false)，无法改变disabled的值为false，下面看看小编是怎么解决此问题的，需要的朋友一起了解了解吧

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

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

您可能感兴趣的文章:

相关文章

  • js位运算在实际中使用的实例教程

    js位运算在实际中使用的实例教程

    我们可能很少在编程中用位运算,如果没深入学习,可能也很难理解,下面这篇文章主要给大家介绍了关于js位运算在实际中使用的相关资料,需要的朋友可以参考下
    2022-03-03
  • 原生JS实现的雪花飘落动画效果

    原生JS实现的雪花飘落动画效果

    这篇文章主要介绍了原生JS实现的雪花飘落动画效果,涉及javascript数值运算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-05-05
  • JavaScript自定义等待wait函数实例分析

    JavaScript自定义等待wait函数实例分析

    这篇文章主要介绍了JavaScript自定义等待wait函数,实例分析了自定义等待函数的实现与使用技巧,需要的朋友可以参考下
    2015-03-03
  • js实现简单广告小窗口

    js实现简单广告小窗口

    这篇文章主要为大家详细介绍了js实现简单广告小窗口，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 微信小程序日历组件使用方法详解

    微信小程序日历组件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序日历组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 值得分享的轻量级Bootstrap Table表格插件

    值得分享的轻量级Bootstrap Table表格插件

    这篇文章为大家分享了轻量级Bootstrap Table表格插件，以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列等操作，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 使用Bootstrap美化按钮实例代码(demo)

    使用Bootstrap美化按钮实例代码(demo)

    这篇文章主要介绍了使用Bootstrap美化按钮实例代码(demo),非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • 按给定几率进行随机抽取的js代码

    按给定几率进行随机抽取的js代码

    没啥技术含量的随机抽取，需要的朋友可以参考下。
    2010-12-12
  • 详解JavaScript中的坐标和距离

    详解JavaScript中的坐标和距离

    在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况，于是便有了整理记录的想法，即加深了印象，又方便随时查阅。
    2019-05-05
  • JavaScript操作元素实例大全

    JavaScript操作元素实例大全

    JavaScript可以对各种网页元素进行操控,下面这篇文章主要给大家介绍了关于JavaScript操作元素的相关资料,文中通过多个实例详细介绍了操作元素的方法，需要的朋友可以参考下
    2021-06-06

最新评论