javascript實(shí)現(xiàn)選中復(fù)選框后相關(guān)輸入框變灰不可用的方法
本文實(shí)例講述了javascript實(shí)現(xiàn)選中復(fù)選框后相關(guān)輸入框變灰不可用的方法。分享給大家供大家參考。具體如下:
在一些網(wǎng)站上經(jīng)常會(huì)看到的這種功能,選中復(fù)選框,相關(guān)的選項(xiàng)為變灰色,不可用,看上去會(huì)專業(yè)一些,也是提升用戶體驗(yàn)的一種方式。
運(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)">平時(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ì)有所幫助。
- javascript判斷單選框或復(fù)選框是否選中方法集錦
- JavaScript檢測(cè)并限制復(fù)選框選中個(gè)數(shù)的方法
- javascript實(shí)現(xiàn)復(fù)選框選中屬性
- javascript實(shí)現(xiàn)復(fù)選框超過限制即彈出警告框的方法
- javascript獲取checkbox復(fù)選框獲取選中的選項(xiàng)
- JavaScript限定復(fù)選框的選擇個(gè)數(shù)示例代碼
- javascript 設(shè)置某DIV區(qū)域內(nèi)的checkbox復(fù)選框
- 比較實(shí)用的復(fù)選框的實(shí)用javascript腳本
- javascript 復(fù)選框選擇/全選后特效
- JavaScript簡單判斷復(fù)選框是否選中及取出值的方法
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03
基于HTML+JavaScript實(shí)現(xiàn)中國象棋
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JS實(shí)現(xiàn)中國象棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08
解析javascript 數(shù)組以及json元素的添加刪除
本篇文章是對(duì)javascript 數(shù)組以及json元素的添加刪除進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06
微信小程序?qū)崿F(xiàn)簡單倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單倒計(jì)時(shí)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05
Add a Table to a Word Document
Add a Table to a Word Document...2007-06-06
一個(gè)級(jí)聯(lián)菜單(IE ONLY),不過代碼很精簡!
一個(gè)級(jí)聯(lián)菜單(IE ONLY),不過代碼很精簡!...2006-10-10
[js高手之路]設(shè)計(jì)模式系列課程-發(fā)布者,訂閱者重構(gòu)購物車的實(shí)例
下面小編就為大家?guī)硪黄猍js高手之路]設(shè)計(jì)模式系列課程-發(fā)布者,訂閱者重構(gòu)購物車的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08

