javascript实现选中复选框后相关输入框变灰不可用的方法
更新时间：2015年08月11日 15:18:42 作者：企鹅
这篇文章主要介绍了javascript实现选中复选框后相关输入框变灰不可用的方法,涉及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="jb51.net" name=bb>jb51.net
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
很多前端的同学对数据结构和算法这块没有太多的概念,很多leetcode的题目看不懂,有时候可能看了题解也不知道是什么意思,这篇文章咱们来简单的谈一谈链表,文中给大家介绍了JS实现链表数据结构的示例代码,需要的朋友可以参考下2024-01-01
TensorFlow.js是一个开源的基于硬件加速的JavaScript库，用于训练和部署机器学习模型。本教程将会带大家简单了解和使用TensorFlow.js框架实现预测鸢尾花种类2022-11-11
JavaScript算法系列之快速排序（Quicksort）算法实例详解
这篇文章主要介绍了JavaScript算法系列之快速排序（Quicksort）算法实例详解的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了bootstrap输入框组件使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了JS匹配日期和时间的正则表达式,结合实例形式分析了JS匹配日期、时间及日期+时间等时间格式的相关实现技巧,需要的朋友可以参考下2017-05-05
如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑,这篇文章主要给大家介绍了关于微信公众号授权的相关资料,需要的朋友可以参考下2021-07-07
点击显示指定元素并隐藏其他同辈元素，下面有个不错的方法,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了JavaScript对数组进行随机重排的方法,实例分析了javascript实现数组随机重新排序的两种实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了小程序之简单登录注册表单验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
appendChild主要是用来追加节点插入到最后；循环的时候由于不停的搬家导致length 在改变，改用for的话开始的length已经被固定，问题就解决啦2013-07-07
最新评论