jQuery checkbox 选中取消-20130713

最新推荐文章于 2021-11-01 09:32:36 发布

xjwolaile

最新推荐文章于 2021-11-01 09:32:36 发布

阅读量97

点赞数

分类专栏：前端技术 jQuery 学习文章标签： attr removeAttr removeClass addClass

本文链接：https://blog.csdn.net/xjwolaile/article/details/84458319

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

jQuery

63 篇文章 0 订阅

订阅专栏

1、效果及功能说明

checkbox多选框点击事件控制显示隐藏

2、实现原理

点击打勾点击填写内容信息，会触发添加一个类，这个类能让下面的用户名和密码的输入框填写当没有打勾的时候就会把这个类给删除掉让用户名和密码没办法填写

主要的方法


$("#findform li .inputext").removeClass("grayinput");
删除类，不能填写
$("#findform li .inputext").addClass("grayinput");
点击以后添加这个类，变得可以填写

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/9037/db99a239-4a07-3d27-ac36-d1387b7d6062.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

(无图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]


<!DOCTYPE htm>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></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><!--formbox end-->

<script type="text/javascript">
$(document).ready(function(){
//定义一个可以激活所有函数的方法
	$("#five").click(function(){
	//定义一个点击事件
		if($(this).attr("checked")){
		//如果改变图像的 width 属性 checked 属性设置或返回 checkbox 是否应被选中
			$("#findform li input").removeAttr("disabled","");
			//定义一个 从 findform li input 里面删除 disabled  
			$("#findform li .inputext").removeClass("grayinput");
			//定义 在从 findform li .inputext里面删除掉 grayinput 类
		}else{
		//否则
			$("#findform li input").attr("disabled","disabled");
			//findform li input 改变图片的 width 属性 disabled
			$("#findform li .inputext").addClass("grayinput");
			//在findform li .inputext里面添加一个grayinput类
		}
	})
});
</script>
</body>
</html>

xjwolaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery checkbox 选中取消-20130713

1、效果及功能说明 checkbox多选框点击事件控制显示隐藏2、实现原理点击打勾点击填写内容信息，会触发添加一个类，这个类能让下面的用户名和密码的输入框填写当没有打勾的时候就会把这个类给删除掉让用户名和密码没办法填写主要的方法 [code="html5"]$("#findform li .inputext").removeClass("grayinp...
复制链接

扫一扫