JS禁用页面上所有控件的实现方法(附demo源码下载)


Posted in Javascript onDecember 17, 2015

本文实例讲述了JS禁用页面上所有控件的实现方法。分享给大家供大家参考,具体如下:

利用页面元素的特征,可以捕捉到所有元素。

function DisableElements(container,blnHidenButton)
{
  if (!container)
  return;
  var aEle;
  if (navigator.appName =="Microsoft Internet Explorer") //IE
  {
    for (var i=0;i<container.all.length;i++)
    {
      aEle = container.all[i];
      tagName = aEle.tagName.toUpperCase();
      if ((tagName=="SELECT"))
      {
        aEle.disabled = true;
        if(tagName=="BUTTON" && blnHidenButton)
        {
          //aEle.style.display = "none";//对button不做处理
        }
      }
      else if (tagName=="INPUT")
      {
        if (aEle.type.toUpperCase()!="HIDDEN")
        {
          if (aEle.type.toUpperCase()=="TEXT")
          {
            ReadonlyText(aEle);
          }
          else if (aEle.type.toUpperCase()=="BUTTON")
          {
            //do nothing;
          }
          else
          {
            aEle.disabled = true;
          }
        }
        if((aEle.type.toUpperCase()=="BUTTON"||aEle.type.toUpperCase()=="SUBMIT") && blnHidenButton)
        {
          //aEle.style.display = "none";//对button不处理
        }
      }
      else if (tagName=="TEXTAREA")
      {
        ReadonlyText(aEle);
      }
    }
  }
  else//非IE浏览器
  {
    var aEle = container.getElementsByTagName("select");
    for (var i=0;i< aEle.length;i++)
    {
      aEle[i].disabled = true;
    }
    aEle = container.getElementsByTagName("button");
    for (var i=0;i< aEle.length;i++)
    {
      aEle[i].disabled = true;
    }
    aEle = container.getElementsByTagName("textarea");
    for (var i=0;i< aEle.length;i++)
    {
      ReadonlyText(aEle[i]);
    }
    aEle = container.getElementsByTagName("input");
    for (var i=0;i< aEle.length;i++)
    {
      if (aEle[i].type.toUpperCase()!="HIDDEN")
      {
        if (aEle[i].type.toUpperCase()=="TEXT")
        {
          ReadonlyText(aEle[i]);
        }
        else
        {
          aEle[i].disabled = true;
        }
      }
      if((aEle[i].type.toUpperCase()=="BUTTON"||aEle[i].type.toUpperCase()=="SUBMIT")&&blnHidenButton)
      {
        aEle[i].style.display = "none";
      }
    }
  }
}
function ReadonlyText(objText) 
{
  if (objText){
    //objText.style.backgroundColor = "menu";
    objText.style.background = "#E6E6E6";
    //objText.style.color = "black";
    objText.readOnly=true;
  }
}

效果非常好,我这里将button全部保留了,如果想将button也禁用掉,可以将注释去掉。

调用代码:

假设有个name为formeditor的form,调用方法如下:

var myForm=document.forms["formEditor"];
DisableElements(myForm,'true');

完整实例代码点击此处本站下载。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript function调用时的参数检测常用办法
Feb 26 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
jQuery选择器用法实例详解
Dec 17 #Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 #Javascript
js倒计时简单实现方法
Dec 17 #Javascript
高效的jquery数字滚动特效
Dec 17 #Javascript
JS函数的几种定义方式分析
Dec 17 #Javascript
js实现文字闪烁特效的方法
Dec 17 #Javascript
基于jquery实现省市联动特效
Dec 17 #Javascript
You might like
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
深入学习Python中的装饰器使用
2016/06/20 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
会话Bean的种类
2013/11/07 面试题
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
邹越演讲观后感
2015/06/15 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS