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


Posted in Javascript onApril 12, 2013
<!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>
Javascript 相关文章推荐
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
Vuex入门到上手教程
Jun 20 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
js实现下拉框二级联动
Dec 04 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 #Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 #Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 #Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 #Javascript
关于JavaScript中string 的replace
Apr 12 #Javascript
关于JavaScript与HTML的交互事件
Apr 12 #Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 #Javascript
You might like
php strrpos()与strripos()函数
2013/08/31 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
jquery密码强度校验
2015/12/02 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
简单了解python变量的作用域
2019/07/30 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
类的核心特性有哪些
2014/01/01 面试题
销售人员中英文自荐信
2013/09/22 职场文书
优质服务口号
2014/06/11 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
生日宴会祝酒词
2015/08/10 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript