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

作者：98wpeu发布时间：2026-06-12分类：网页前端技术浏览：6

导读：复制代码代码如下:<!DOCtypehtml><HTMLxmlns="http://www.w3.org/1999/xhtml"><head&g...

复制代码代码如下:
<!DOCtypehtml>
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<head>
<metaHTTP-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>

标签：屏蔽插件元素 Web jQuery

上一篇：通过jquery还原含有rowspan、colspan的table的实现方法 - Web前端
下一篇：jQuery图片播放8款精美插件分享 - Web前端

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

相关推荐