jQuery插件实现屏蔽单个元素使用户无法点击
更新时间：2013年04月12日 15:39:21 作者：
屏蔽单个元素使用户无法点击在某些特殊的情况下还是蛮有用的,例如及不举了，感兴趣的朋友可以参考下，希望可以帮助到你
复制代码 代码如下:
<!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>
相关文章
这篇文章主要为大家详细介绍了jQuery实现可以计算进制转换的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
这篇文章主要介绍了jQuery实现鼠标跟随提示层效果代码,具备显示文本,Div,Table,Html等功能.涉及jQuery针对鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了jQuery中after()方法用法,以实例形式较为详细的分析了after()方法的功能、特性与使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
checkbox全选反选的文章在以前也有介绍很多，实在是不想在提起了，然而身边还是有些朋友不会，于是3分钟写出来一个估计有很多bug2013-10-10
这篇文章主要介绍了jQuery实现的form转json功能,结合完整实例形式分析了jQuery将form表单数据封装成json传输的具体步骤与相关操作技巧,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了jQuery 选择器详解,图文并茂，十分不错，需要的朋友可以参考下2015-01-01
要实现这样的一个功能复选框勾选时给input表单赋值，复选框取消时将表单值清除，需要的朋友可以参考下2014-05-05
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
jquery.cookie.js操作cookie实现记住密码功能，很简单很强大，喜欢的朋友可以参考下。2011-04-04
迷上jQuery,相对于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研习原生JavaScript.2010-07-07
一个基于jQuery的树型插件(OrangeTree)使用介绍
这个样式大家就将就一下吧！我将这个无限级树型插件命名为桔子树，需要的朋友可以参考下2012-05-05
最新评论