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 对象、函数和继承
Jul 07 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 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高手需要要掌握的知识点
2014/08/21 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
php 基础函数
2017/02/10 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
js中作用域的实例解析
2017/03/16 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Python 私有函数的实例详解
2017/09/11 Python
Python 元类实例解析
2018/04/04 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
解析python的局部变量和全局变量
2019/08/15 Python
python实现银行实战系统
2020/02/26 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
网络方面基础面试题
2012/11/16 面试题
自动化职业生涯规划书范文
2014/01/03 职场文书
网络程序员自荐信
2014/01/25 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
给国外客户的邀请函
2014/01/30 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
病假条格式范文
2015/08/17 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
排查Tomcat进程假死的问题
2022/05/06 Servers