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