suchen

Heim >Web-Frontend >js-Tutorial >Javascript-Methode, um zu erkennen, dass das entsprechende Eingabefeld nach Auswahl des Kontrollkästchens_Javascript-Kenntnisse ausgegraut und nicht mehr verfügbar ist

Javascript-Methode, um zu erkennen, dass das entsprechende Eingabefeld nach Auswahl des Kontrollkästchens_Javascript-Kenntnisse ausgegraut und nicht mehr verfügbar ist

WBOY
WBOYOriginal
2016-05-16 15:45:461631Durchsuche

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung von javascript:void(0) in js_javascript-FähigkeitenNächster Artikel：Detaillierte Erläuterung der Verwendung von javascript:void(0) in js_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen