Rumah > Artikel > hujung hadapan web > Kaedah Javascript untuk menyedari bahawa kotak input yang berkaitan menjadi kelabu dan tidak tersedia selepas memilih kotak semak_kemahiran javascript

Kaedah Javascript untuk menyedari bahawa kotak input yang berkaitan menjadi kelabu dan tidak tersedia selepas memilih kotak semak_kemahiran javascript

WBOYasal: 2016-05-16 15:45:461604semak imbas

Contoh dalam artikel ini menerangkan cara melaksanakan JavaScript untuk menjadikan kotak input yang berkaitan berwarna kelabu dan tidak tersedia selepas kotak semak dipilih. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Fungsi ini sering dilihat pada beberapa tapak web Jika anda memilih kotak semak, pilihan yang berkaitan akan dikelabukan dan tidak tersedia. Ia akan kelihatan lebih profesional dan juga merupakan cara untuk meningkatkan pengalaman pengguna.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut:

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Penjelasan terperinci tentang penggunaan javascript:void(0) dalam kemahiran js_javascriptArtikel seterusnya：Penjelasan terperinci tentang penggunaan javascript:void(0) dalam kemahiran js_javascript

Artikel berkaitan

Lihat lagi