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 相关文章推荐
DOM操作一些常用的属性汇总
Mar 13 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
vue 集成jTopo 处理方法
Aug 07 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
Wordpress php 分页代码
2009/10/21 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
python中set()函数简介及实例解析
2018/01/09 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
在django模板中实现超链接配置
2019/08/21 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
详解python的变量缓存机制
2021/01/24 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
经典的班主任推荐信
2013/10/28 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书