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 写的简单进度条控件
Jan 22 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
js同源策略详解
May 21 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
vue v-model动态生成详解
Jun 30 Javascript
Vue插件之滑动验证码用法详解
Apr 05 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
简单采集了yahoo的一些数据
2007/02/14 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
Python学生成绩管理系统简洁版
2020/04/05 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
cf战队收人口号
2014/06/21 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
初中重阳节活动总结
2015/05/05 职场文书
个人收入证明格式
2015/06/24 职场文书