Das Beispiel in diesem Artikel beschreibt, wie Sie JavaScript implementieren, um das entsprechende Eingabefeld grau und nicht verfügbar zu machen, nachdem das Kontrollkästchen aktiviert wurde. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Diese Funktion wird häufig auf einigen Websites angezeigt. Wenn Sie das Kontrollkästchen aktivieren, werden die entsprechenden Optionen ausgegraut und sind nicht verfügbar. Dies sieht professioneller aus und ist auch eine Möglichkeit, das Benutzererlebnis zu verbessern.
Der Betriebseffekt ist wie folgt:
Der spezifische Code lautet wie folgt:
<!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>Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
