jquery checkbox 选中取消 checkbox多选框控制显示隐藏[带演示]

最新推荐文章于 2024-07-06 00:11:00 发布

weixin_30762087

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量352

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/zerogo/archive/2011/11/15/2249413.html

版权

http://www.corange.cn//uploadfiles/20111527_85094.jpg

演示地址: 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{width: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{width: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;width: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>

<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

转载于:https://www.cnblogs.com/zerogo/archive/2011/11/15/2249413.html

weixin_30762087

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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://w...
复制链接

扫一扫