-
jquery checkbox 选中 取消 checkbox多选框 控制显示隐藏[带演示]
演示地址:http://www.corange.cn/demo/3798/index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery checkbox 选中 取消 checkbox多选框 控制显示隐藏</title> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("jquery", "1.2.6"); </script> </head> <body> <style type="text/css"> *{margin:0;margin:0;list-style-type:none;} a,img{border:0;} img{vertical-align:middle;} label{cursor:pointer;} address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:normal;font-weight:normal} input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit} input,button,textarea,select{*font-size:100%} body{font:12px/180% Arial,"宋体";color:#333;} .formbox{400px;border:solid 1px #ddd;padding:10px 20px 20px 20px;margin:0 auto;} .findfive{height:20px;overflow:hidden;padding:5px 0 0 20px;} /* findform */ #findform{padding:0 0 0 20px;} #findform li .inputext{360px;height:20px;line-height:20px;padding:0 0 0 3px;background:url(images/inputbg.png) no-repeat;border:solid 1px #c6c6c6;} #findform li .inputext input{border:none;font-family:Arial;background:none;97%;margin:3px 0 0 0;} #findform li .grayinput{background:url(images/inputgraybg.png) no-repeat;} </style> <div class="formbox"> <div class="findfive"><input type="checkbox" name="" id="five" /> <label for="five">点击填写内容信息</label></div> <ul id="findform" class="clearfix"> <li><span class="f-l">姓名:</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li> <li><span class="f-l">性别:</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li> <li><span class="f-l">电话(选填):</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li> </ul> </div><!--formbox end--> <script type="text/javascript"> $(document).ready(function(){ $("#five").click(function(){ if($(this).attr("checked")){ $("#findform li input").removeAttr("disabled",""); $("#findform li .inputext").removeClass("grayinput"); }else{ $("#findform li input").attr("disabled","disabled"); $("#findform li .inputext").addClass("grayinput"); } }) }); </script> </body> </html> 原文地址:http://www.corange.cn/archives/2011/11/3798.html
-
相关阅读:
Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构
Atitti 大话存储读后感 attilax总结
Atitit 设计模式的本质思考】
Atitit 深入理解抽象类与接口 attilax总结
Atitit 动态调用webservice与客户端代理方式调用
atitit. 深入理解Cohesion)原理ad attilax大总结
Atitit.软件开发的几大规则,法则,与原则Principle v3
Atitti onvif 设备发现与原理
Atitit 边缘检测原理attilax总结
Atitit wsdl的原理attilax总结
-
原文地址:https://www.cnblogs.com/zerogo/p/2249413.html
Copyright © 2020-2023
润新知