jQuery插件實現(xiàn)屏蔽單個元素使用戶無法點擊
更新時間：2013年04月12日 15:39:21 作者：
屏蔽單個元素使用戶無法點擊在某些特殊的情況下還是蠻有用的,例如及不舉了，感興趣的朋友可以參考下，希望可以幫助到你
復(fù)制代碼 代碼如下:
<!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文件中， 方便調(diào)用
//-------------- 插件 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' };//映射對應(yīng)關(guān)系
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>
相關(guān)文章
使用JQuery快速實現(xiàn)Tab的AJAX動態(tài)載入(實例講解)
這篇文章主要介紹了使用JQuery快速實現(xiàn)Tab的AJAX動態(tài)載入(實例講解)需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
Jquery實現(xiàn)textarea根據(jù)文本內(nèi)容自適應(yīng)高度
本文給大家分享的是Jquery實現(xiàn)textarea根據(jù)文本內(nèi)容自適應(yīng)高度，這些在平時的項目中挺實用的，所以抽空封裝了一個文本框根據(jù)輸入內(nèi)容自適應(yīng)高度的插件，這里推薦給小伙伴們。2015-04-04
本篇文章主要是對JQuery中操作Css樣式的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
漢化英文版的Dreamweaver CS5并自動提示jquery
如果從Adobe Dreamweaver CS5的官網(wǎng)上下載了一個Adobe Dreamweaver CS5，那么Adobe Dreamweaver CS5默認你是英文版的，我們中國人還是比較習慣看漢字的。2010-11-11
這篇文章主要介紹了jQuery簡單獲取鍵盤事件的方法,涉及jQuery針對鍵盤事件的獲取與響應(yīng)技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery中animate()方法用法,以實例形式分析了animate()方法的功能、定義及具體使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery Validate 無法驗證 chosen-select元素的解決方法
這篇文章主要介紹了jQuery Validate 無法驗證 chosen-select元素的解決方法,需要的朋友可以參考下2017-05-05
jQuery Chart圖表制作組件Highcharts用法詳解
這篇文章主要介紹了jQuery Chart圖表制作組件Highcharts用法,詳細分析了Highcharts插件的功能與具體使用技巧及相關(guān)注意事項,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JQuery為頁面Dom元素綁定事件及解除綁定方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了Jquery Ajax xmlhttp請求成功問題,需要的朋友可以參考下2015-02-02