本文實例講述了javascript實作選取複選框後相關輸入框變灰不可用的方法。分享給大家供大家參考。具體如下:
在某些網站上常會看到的這種功能,選取複選框,相關的選項為變灰色,不可用,看上去會專業一些,也是提升使用者體驗的一種方式。
運作效果如下圖:
具體程式碼如下:
<!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)">平时不上网 <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程式設計有所幫助。