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 相关文章推荐
Safari5中alert的无限循环BUG
Apr 07 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php获取url参数方法总结
2014/11/13 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
javascript脚本调试方法小结
2008/11/24 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
python网络编程之五子棋游戏
2020/05/14 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
浅析Python 责任链设计模式
2020/09/11 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android