javascript實現(xiàn)選中復選框后相關輸入框變灰不可用的方法
更新時間:2015年08月11日 15:18:42 作者:企鵝
這篇文章主要介紹了javascript實現(xiàn)選中復選框后相關輸入框變灰不可用的方法,涉及javascript針對頁面元素屬性的相關操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了javascript實現(xiàn)選中復選框后相關輸入框變灰不可用的方法。分享給大家供大家參考。具體如下:
在一些網(wǎng)站上經(jīng)常會看到的這種功能,選中復選框,相關的選項為變灰色,不可用,看上去會專業(yè)一些,也是提升用戶體驗的一種方式。
運行效果如下圖所示:
具體代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>選中復選框,相關類變灰</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程序設計有所幫助。
相關文章
解析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高手之路]設計模式系列課程-發(fā)布者,訂閱者重構購物車的實例
下面小編就為大家?guī)硪黄猍js高手之路]設計模式系列課程-發(fā)布者,訂閱者重構購物車的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08