快捷導(dǎo)航

javascript實(shí)現(xiàn)選中復(fù)選框后相關(guān)輸入框變灰不可用的方法

更新時(shí)間：2015年08月11日 15:18:42 作者：企鵝

這篇文章主要介紹了javascript實(shí)現(xiàn)選中復(fù)選框后相關(guān)輸入框變灰不可用的方法,涉及javascript針對(duì)頁(yè)面元素屬性的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)選中復(fù)選框后相關(guān)輸入框變灰不可用的方法。分享給大家供大家參考。具體如下：

在一些網(wǎng)站上經(jīng)常會(huì)看到的這種功能，選中復(fù)選框，相關(guān)的選項(xiàng)為變灰色，不可用，看上去會(huì)專(zhuān)業(yè)一些，也是提升用戶(hù)體驗(yàn)的一種方式。

運(yùn)行效果如下圖所示：

具體代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>選中復(fù)選框，相關(guān)類(lèi)變灰</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)">平時(shí)不上網(wǎng)
<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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS字符串補(bǔ)全方法padStart()和padEnd()
這篇文章主要介紹了JS字符串補(bǔ)全方法padStart()和padEnd()，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例
下面小編就為大家分享一篇js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
JS原型prototype和__proto__用法實(shí)例分析
這篇文章主要介紹了JS原型prototype和__proto__用法,結(jié)合實(shí)例形式分析了JS原型prototype和__proto__使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
javascript學(xué)習(xí)筆記之10個(gè)原生技巧
首先在這里要非常感謝無(wú)私分享作品的網(wǎng)友們，這些代碼片段主要由網(wǎng)友們平時(shí)分享的作品代碼里面和經(jīng)常去逛網(wǎng)站然后查看源文件收集到的。把平時(shí)網(wǎng)站上常用的一些實(shí)用功能代碼片段通通收集起來(lái)，方便網(wǎng)友們學(xué)習(xí)使用，利用好的話(huà)可以加快網(wǎng)友們的開(kāi)發(fā)速度，提高工作效率。
2014-05-05
半角全角相互轉(zhuǎn)換的js函數(shù)
全角空格為12288，半角空格為32 其他字符半角(33-126)與全角(65281-65374)的對(duì)應(yīng)關(guān)系是：均相差65248 .
2009-10-10
Jquery對(duì)數(shù)組的操作技巧整理
這篇文章主要介紹了Jquery對(duì)數(shù)組的操作技巧,需要的朋友可以參考下
2014-03-03
JS繼承與閉包及JS實(shí)現(xiàn)繼承的三種方式
大家都知道，面向?qū)ο蟮娜筇卣鳌庋b、繼承、多態(tài)。下面通過(guò)本文給大家介紹JS繼承與閉包及JS實(shí)現(xiàn)繼承的三種方式，感興趣的朋友一起看看吧
2017-10-10
詳解javascript高級(jí)定時(shí)器
這篇文章主要介紹了javascript高級(jí)定時(shí)器，針對(duì)javascript的代碼隊(duì)列進(jìn)行詳細(xì)解析，感興趣的小伙伴們可以參考一下
2015-12-12
js實(shí)現(xiàn)鼠標(biāo)拖曳效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)拖曳效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
微信小程序靜默登錄的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序靜默登錄的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-01-01