<!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 屏蔽单个元素使用户无法点击】相关文章：
★ attr()、counter()和calc()在css中的使用
★ css的em/ex/px/pt(css长度单位)使用介绍