编程 Javascript

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 学习之旅（1）

Feb 05 Javascript

基于jquery的让textarea自适应高度的插件

Aug 03 Javascript

javascript学习笔记(十三) js闭包介绍(转)

Jun 20 Javascript

通过JS自动隐藏手机浏览器的地址栏实现原理与代码

Jan 02 Javascript

jQuery中end()方法用法实例

Jan 08 Javascript

详解jQuery移动页面开发中的ui-grid网格布局使用

Dec 03 Javascript

JavaScript截取、切割字符串的技巧

Jan 07 Javascript

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

Jun 12 Javascript

利用jsonp跨域调用百度js实现搜索框智能提示

Aug 24 Javascript

JavaScript中数组slice和splice的对比小结

Sep 22 Javascript

JS获取一个表单字段中多条数据并转化为json格式

Oct 17 Javascript

小程序获取当前位置加搜索附近热门小区及商区的方法

Apr 08 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