利用蒙板控制表单内部控件是否可修改-jquery实现

最新推荐文章于 2021-06-04 16:15:07 发布

hfkiss44

最新推荐文章于 2021-06-04 16:15:07 发布

阅读量118

点赞数

文章标签： jQuery CSS HTML ViewUI

在做更新页面的时候时常会有需求限制用户，一部分属性值可改另一部分的属性值不能修改当不能修改的属性值多于可修改属性值的时候那么在页面初始化的时候设置每个控件的disable非常麻烦且select还需要单独设置于是我想到了利用蒙版将可以修改的属性控件置于蒙版之上


<html>
	<head>
		<title>编辑蒙版示例</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript">

			$(document).ready(function() {
				 addmask();
				 //页面大小改变重绘蒙版
				 $(window).resize(function(){
			         addmask();
				 });
				 $("#editPart").bind("click",editPart);
				 $("#editAll").bind("click",editAll);
				 $("#sub").click(function(){
				    alert("现在可以提交啦！！！！");
				 })
				 $("#cantedit").bind("click",cantEdit);

			})
			function addmask() {
				var offsettop = $("#tb").offset().top;
				var offsetleft = $("#tb").offset().left;
				var width = $("#tb").width();
				var height = $("#tb").height();
				$("#mask").css( {
					position : "absolute",
					'top' : offsettop,
					'left' : offsetleft,
					'width' : width,
					'height' : height,
					'z-index' : 2,
					'opacity' : '0.4'
				});
			}
			//可全部编辑
			function editAll(){
			   $("#mask").hide();
			}
			//可部分编辑
			function editPart(){
			//由于z-index只能在定位元素上生效，所以将需要设置的元素的position设置为relative（相对定位）若设置成absolute（绝对定位）则会影响页面排板效果
			//.addClass("show") 是给修改过属性的元素加上一个伪类  便于获取修改过属性的控件
			   $("#t1").css({position : "relative",'z-index':3}).addClass("show");

			   $("#sub").css({position : "relative",'z-index':3}).addClass("show");
			}
			//不可编辑
			function cantEdit(){
			    $(".show").removeClass("show").css({position : "static",'z-index':0});
			    addmask(); 
			    $("#mask").show();
			}

</script>
	</head>
	<body>
		<table width="100%" border="1" id="tb">
			<tr><td >姓名:<input type="text" id="t1"/>  <input type="text"  style=""/></td></tr>
			<tr><td>年龄:<input type="text" /></td></tr>
			<tr><td>性别<input type="text" /></td></tr>
			<tr><td><input type="text" />      <input type="button" id="sub" value="提交"/> </td></tr>
		</table>
		<div id="mask" style="background:#CCC"></div>
		<input type="button" id="editPart" value="编辑部分"/><input type="button" id="editAll" value="全部编辑"/> <input type="button" id="cantedit" value="不可编辑"/> 
	</body>
</html>