利用蒙板控制表单内部控件是否可修改-jquery实现
在做更新页面的时候时常会有需求限制用户，一部分属性值可改 另一部分的属性值不能修改 当不能修改的属性值多于可修改属性值的时候 那么在页面初始化的时候设置每个控件的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>