jQuery插件实现屏蔽单个元素使用户无法点击-Web前端之家

复制代码代码如下:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
// 下面的插件部分建议放在js文件中，　方便调用 
//-------------- 插件 begin ------------------ 
(function ($) { 
//屏蔽，适合单个元素. 
$.fn.mask = function () { 
var divHtml = '<div class="divMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; opacity: 0; filter: alpha(opacity=0)"> </div>'; 
$(this).wrap('<span style="position: relative"></span>'); 
$(this).parent().append(divHtml); 
$(this).data("mask","true"); 
} 
//取消屏蔽 
$.fn.unmask = function () { 
$(this).parent().find(".divMask").remove(); 
$(this).unwrap(); 
$(this).data("mask", "false"); 
} 
})(jQuery); 
//-------------- 插件 end ------------------ 
//并没有做disabled处理，　只是上面加多了个屏蔽层，　使之无法点到而已。 
//这样其它地方无须再处理，更方便。 
function changeA2(obj) { 
var t = { 'key': 'b', 'value': '2' };//映射对应关系 
if (obj.value == t.key) { 
$("#A2").val(t.value); 
$("#A2").mask(); 
} else { 
$("#A2").val(""); 
$("#A2").unmask(); 
} 
} 
</script> 
</head> 
<body> 
<select name="A1" id="A1" onchange="changeA2(this)"> 
<option value="">--请选择--</option> 
<option value="a">a</option> 
<option value="b">b</option> 
<option value="c">c</option> 
<option value="d">d</option> 
</select> 
<select name="A2" id="A2"> 
<option value="">--请选择--</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
</body> 
</html> 