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 相关文章推荐
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
js给selected添加options的方法
May 06 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
用javascript实现倒计时效果
Feb 09 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 身份证号验证函数
2009/05/07 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
php数组使用规则分析
2015/02/27 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
vue跨域解决方法
2017/10/15 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python装饰器用法实例分析
2019/01/14 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Python连接Impala实现步骤解析
2020/08/04 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
项目合作意向书模板
2014/07/29 职场文书
授权委托书格式范文
2014/08/02 职场文书
毕业生见习报告总结
2014/11/08 职场文书
面试通知短信
2015/04/20 职场文书
村官2015年度工作总结
2015/10/14 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python