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 XML实现两级级联下拉列表
Nov 10 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
package.json各个属性说明详解
Mar 11 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
工作中常用js功能汇总
Nov 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
php分页函数
2006/07/08 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
Web程序工作原理详解
2014/12/25 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP与以太坊交互详解
2018/08/24 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
《尊严》教学反思
2014/02/11 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
红色故事汇观后感
2015/06/18 职场文书
如何写通讯稿
2015/07/22 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
Python中的socket网络模块介绍
2022/07/23 Python