javascript实现选中复选框后相关输入框变灰不可用的方法


Posted in Javascript onAugust 11, 2015

本文实例讲述了javascript实现选中复选框后相关输入框变灰不可用的方法。分享给大家供大家参考。具体如下:

在一些网站上经常会看到的这种功能,选中复选框,相关的选项为变灰色,不可用,看上去会专业一些,也是提升用户体验的一种方式。

运行效果如下图所示:

javascript实现选中复选框后相关输入框变灰不可用的方法

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>选中复选框,相关类变灰</title>
<script language="JavaScript">
<!--
function selectKind(the){
var obj = the;
var container = document.getElementById("kind_" + obj.name);
for(var i=0;i<container.getElementsByTagName("input").length;i++)
{
container.getElementsByTagName("input")[i].disabled = obj.checked;
}
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<input type='checkbox' value="2" name=aa onclick="selectKind(this)">我从事游戏编程
<div id="kind_aa">
<input type='checkbox' value="php" name=aa>PHP 
<input type='checkbox' value="asp.net" name=aa>ASP.NET
<input type='checkbox' value="java" name=aa>JAVA
</div>
<input type='checkbox' value="1" name=bb onclick="selectKind(this)">平时不上网
<div id="kind_bb">
<input type='checkbox' value="baidu.com" name=bb>baidu.com 
<input type='checkbox' value="163.com" name=bb>163.com
<input type='checkbox' value="3water.com" name=bb>3water.com
</div>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
seajs下require书写约定实例分析
May 16 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 #Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 #Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 #Javascript
js限制文本框只能输入中文的方法
Aug 11 #Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 #Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 #Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 #Javascript
You might like
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
php文件包含的几种方式总结
2019/09/19 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
React中的render何时执行过程
2018/04/13 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
python多线程编程方式分析示例详解
2013/12/06 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Django返回json数据用法示例
2016/09/18 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
村道德模范事迹材料
2014/08/28 职场文书
继承公证书格式
2015/01/26 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书