recherche

Maison >interface Web >js tutoriel >Méthode Javascript pour réaliser que la zone de saisie correspondante devient grise et indisponible après avoir sélectionné la case à cocher_compétences javascript

Méthode Javascript pour réaliser que la zone de saisie correspondante devient grise et indisponible après avoir sélectionné la case à cocher_compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:45:461630parcourir

L'exemple de cet article décrit comment implémenter JavaScript pour rendre la zone de saisie correspondante grise et indisponible une fois la case cochée. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Cette fonction est souvent visible sur certains sites Web. Si vous cochez la case, les options pertinentes seront grisées et indisponibles. Cela aura un aspect plus professionnel et constitue également un moyen d'améliorer l'expérience utilisateur.

L'effet de l'opération est comme indiqué ci-dessous :

Le code spécifique est le suivant : 

<!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>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'utilisation de javascript:void(0) dans les compétences js_javascriptArticle suivant：Explication détaillée de l'utilisation de javascript:void(0) dans les compétences js_javascript

Articles Liés

Voir plus