本文介绍如何使用JavaScript实现选中复选框后自动禁用相关输入框的功能。通过遍历容器内的input元素并设置disabled属性，可有效提升表单交互体验，适用于需要关联选项控制的场景。
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程序设计有所帮助。