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