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

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

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

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

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

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

具體代碼如下：

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

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

您可能感興趣的文章:

相關(guān)文章

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