jQuery插件实现屏蔽单个元素使用户无法点击

时间：2021-05-26

复制代码 代码如下:
<!DOCTYPE html>
<html xmlns="http:///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)">&nbsp;</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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章