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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
js创建对象的方式总结
Jan 10 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
详解JavaScript树结构
Jan 09 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
react组件基本用法示例小结
Apr 27 Javascript
Vue Router中应用中间件的方法
Aug 06 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP中常用的魔术方法
2017/04/28 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
jquery 常用操作方法
2010/01/28 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
django站点管理详解
2017/12/12 Python
python psutil库安装教程
2018/03/19 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
python-地图可视化组件folium的操作
2020/12/14 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
实习公司领导推荐函
2014/05/21 职场文书
英语分层教学实施方案
2014/06/15 职场文书
2014年变电站工作总结
2014/12/19 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
Vue和Flask通信的实现
2021/05/19 Vue.js
Mysql 如何查询时间段交集
2021/06/08 MySQL
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
Python实现数据的序列化操作详解
2022/07/07 Python