JS判断页面控件是否可用【原创】

2009-12-08 16:27

如果你看到这篇文章,甚至目前正愁于该问题的困扰,希望你把这篇文章看完。至少下次不会在这个问题上浪费时间。

近期做的项目中涉及到页面控件是否可用,发现了一些有趣的东西,现来说说具体如下:

我有一个需求,就是点击radiobutton1时textbox1控件可用,当点击radiobutton2时textbox1不可用。当时以为javascript可以很简单的就处理了这个问题,但发现并非如此。上网找了下资料可以了解到对于如:radiobutton、checkbox这样的控件是否可用直接设置它们的disabled属性为true,false即可。但像label,textbox这样的控件如果这样设置就不起作用了。

上网找了下资料发现http://blog.csdn.net/hzfu007/archive/2009/03/17/3998862.aspx 和我的问题很相像, 但这里仅仅说的是radiobutton这样的控件是否可用,而我的控件是textbox。然后我就试图修改它们的disabled为true或false 发现根本不好用。之后我就在后台控制

protected void radiobutton1_CheckedChanged(object sender, EventArgs e)
    {
        this.linkimg.Enabled = true;
        this.linkimg.BackColor = Color.White;
    }
    protected void radiobutton2_CheckedChanged(object sender, EventArgs e)
    {
        this.linkimg.Enabled = false;
        this.linkimg.BackColor = Color.Silver;
    }

这样是可以实现的,在生成的源代码中发现textbox不可用是设置了它的disabled属性,只不过属性值是"disabled" 而不是true或false 。那么有了disabled属性当然应该有enabled属性吧。因为不想回发(页面刷新)实现这个功能,所以还得利用javascript

修改js为:

if(document.getElementById('radiobutton1').checked==true)
        {
        
        document.getElementById('textbox1').disabled="disabled"; //使控件不可用
        document.getElementById('textbox1').style.backgroundColor="#9c9c9c"; //背景色变灰
              
        }
        if(document.getElementById('radiobutton2').checked==true)
        {
         document.getElementById('textbox1').enabled="enabled";   //控件可用      或document.getElementById('textbox1').disabled="enabled"; //这样也是不行的
         document.getElementById('textbox1').style.backgroundColor="#ffffff";
        }

问题又来了,点击radiobutton1 可以使textbox不可用,但可用还是不行。红色代码根本不起作用。仔细观察发现JS中控件根本没有enabled属性,这个属性是后台控件的属性。并在源代码中也发现控件不可用只是把该控件的disabled="disabled" 可用的话就是没有disabled="disabled" 既然这样那么我想去掉disabled="disabled"不就可以了么!

上网也找了好些资料发现JS去掉控件属性是一件麻烦的事。后来我想到了几个变通的方法来解决:

可以利用AJAX.NET无刷新来解决这个问题,但总觉得能用简单的方法解决的问题,不用AJAX这个大家伙上阵,甚至我还想到了利用JS的创建删除元素的方法。思路是这样的:首先点击radiobutton1控件使控件不可用,当点击 radiobutton2的时候利用removeChild删除不可用的textbox之后立马用createElement在原来位置创建一个textbox。属性都设置好。做到了无刷新,对于用户是不可见的,他们以为是实现了效果,其实是删除了原有的不可用控件之后,再生成一个可用的控件。 但仔细想想这些方法有点小题大作。问题应该可以解决,只不过没有找对方法。

忽然间我灵感来了,如果“取反”会怎样呢?没想到这下成功了。代码如下:

if(document.getElementById('radiobutton1').checked==true)
        {
        
        document.getElementById('textbox1').disabled="disabled"; //使控件不可用
        document.getElementById('textbox1').style.backgroundColor="#9c9c9c"; //背景色变灰
              
        }
        if(document.getElementById('radiobutton2').checked==true)
        {
        document.getElementById('textbox1').disabled=!document.getElementById('textbox1').disabled//使控件可用
        document.getElementById('textbox1').style.backgroundColor="#ffffff";

}

哈哈终于让我解决了。说了那么多废话,总结一下吧;

如果想利用JS更改控件是否可用 radiobutton、checkbox这样的控件 设置它们的disabled 为true或false即可,lable或textbox这样的控件则设置disabled属性。只不过不可用为"false"    可用“取反”即=!document.getElementById('textbox1').disabled;

JS判断页面控件是否可用相关推荐

  1. js判断ActiveX控件是否安装

    转自http://blog.csdn.net/white__cat/article/details/38357499 avascript脚本 [javascript] view plaincopy & ...

  2. js控制html控件显示隐藏和是否可用

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  3. ocx js php,JavaScript_JS实现OCX控件的事件响应示例,JS支持OCX控件的事件(event), - phpStudy...

    JS实现OCX控件的事件响应示例 JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自 ...

  4. js 拖拽生成html,js拖拽插件 js 拖拽控件生成自定义表单 怎么实现

    想请教一个js的问题,拖拽控件 js 拖拽控件生成自定义表单 怎么实现 说说步骤吧 监听mousedown事件 - 获取鼠标点击元素,判断是否可拖拽 - 设置flag做标记 - 建一个tempDOM, ...

  5. Xamarin iOS教程之页面控件

    Xamarin iOS教程之页面控件 Xamarin iOS 页面控件 在iPhone手机的主界面中,经常会看到一排小白点,那就是页面控件,如图2.44所示.它是由小白点和滚动视图组成,可以用来控制翻 ...

  6. ocx js php,JS实现OCX控件的事件响应示例_javascript技巧

    JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自身肯定是可以实现的,JS提供的这种 ...

  7. html js 如何判断页面是第一次访问还是重复刷新访问,使用JS判断页面是首次被加载还是刷新...

    1 利用window.name属性在页面刷新时不会重置判断(在该属性空置的情况下可使用) if(window.name == ""){ console.log("首次被加 ...

  8. Python+selenium自动化-js处理日历控件(修改readonly属性)

    前言 今天写自动化脚本的时候遇到一个需要更改日期的控件,不想费劲巴拉的去找日历的定位,但是又没办法直接输入我想输的日期时间,想了会儿之后决定用js解决日历控件 基本思路:先用js去掉readonly属 ...

  9. 【jeecg-boot项目开发crm】:day07JeecgBoot-零基础入门视频-05Online表单自定义按钮与JS增强Popup控件Online报表【p5】

    Online表单自定义按钮与JS增强&Popup控件&Online报表[p5] Online表单自定义按钮与JS增强 JS增强的作用 实现一些复杂的页面效果:页面的动态计算,页面字段的 ...

最新文章

  1. 第七篇:循环神经网络
  2. android存储器,Android——寄存器和存储器的区别
  3. odbc里面没有Microsoft Access Driver(*.mdb)问题解决
  4. VMware vCenter Converter Standlone迁移手册
  5. python中的re模块和正则表达式基础
  6. SQL常用语句大全(值得收藏)
  7. iscroll上拉加载、下拉刷新
  8. Android网络应用的封装与调度
  9. WebView 指南
  10. cad调了比例因子没反应_10个常见cad问题的解决方法!学会了这几招不再求人
  11. 英语发音之音标2---去尾法(a和其他6个辅音字母总共7个字母发音)
  12. 整理一些前端模版比较好的网站
  13. sas 统计学 anova
  14. PPPoE拨号以及失败解决思路
  15. TwinCAT3 ADS通讯笔记
  16. KeyDown,KeyPress和KeyUp详解
  17. hexo+gayhub搭建静态博客
  18. 零基础怎么自学软件测试?分享五个宝藏网站,自学简直不要太轻松了
  19. Python设计一个学生类
  20. 一句话与中国菜刀的用法

热门文章

  1. Word 邮件合并中的域的格式的2个小定义
  2. Intellij IDEA 4种配置热部署的方法【转】【补】
  3. 对oracle sql的一些总结
  4. Git 使用篇一:初步使用GitHub,下载安装git,并上传项目
  5. 【bzoj2223】[Coci 2009]PATULJCI 主席树
  6. html5 webDatabase 存储中sql语句执行可嵌套使用
  7. Xtreme ToolkitPro 初使用
  8. ASP.NET 3.5 Extensions预览版即将发布
  9. cuda二维数组内存分配和数据拷贝
  10. C与CUDA混合编程的配置问题