jQuery 屏蔽单个元素使用户无法点击

 <!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>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索插件
, function
, this
, 元素
, value
, mask
, 单个用户
单个元素
jquery 验证单个元素、jquery validate 单个、jquery 单个checkbox、jquery单个烟花制作、jquery单个图片上传,以便于您获取更多的相关知识。

时间: 2024-10-03 02:17:36

jQuery 屏蔽单个元素使用户无法点击的相关文章

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

复制代码 代码如下: <!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

jquery 屏蔽一个区域内的所有元素,禁止输入_jquery

jquery 扩展函数: 复制代码 代码如下: <script type="text/javascript"> (function($) { $.fn.disable = function() { /// <summary> /// 屏蔽所有元素 /// </summary> /// <returns type="jQuery" /> return $(this).find("*").each(fu

jQuery中animate动画第二次点击事件没反应

  这篇文章主要介绍了jQuery中animate动画第二次点击事件没反应的解决方法,非常的实用,有需要的小伙伴可以参考下 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素

浅析jquery某一元素重复绑定的问题

 本篇文章主要是对jquery某一元素重复绑定的问题进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 某天晚上写代码的时候,突然出了bug,想了很久都不知道问题出在哪里(其实是很简单的问题,但由于我还是个菜鸟,所以不知道).几经周折,这中间的过程就不提了,终于让我在快崩溃的时候,发现了原因.原来是因为同一jquery元素可以重复绑定,当使用了嵌套绑定的时候,就容易出错.如代码:     代码如下: $('.test').bind('click',function(){       

jQuery判断一个元素是否可见的方法_jquery

本文实例讲述了jQuery判断一个元素是否可见的方法.分享给大家供大家参考.具体如下: jQuery 可以很容易地确定一个元素是可见的或是隐藏的,然后分别做不同的处理.如:我想根据某 div 是否可见,在按钮上显示不同的文字和图标.可以这样实现: 方法一: $('#para_div button').click(function() { if($(this).next().is(":visible")) { //$(this).html('显示'); $(this).css({&quo

jQuery操作DOM元素

原文:jQuery操作DOM元素 jQuery操作DOM元素 HTML DOM常见操作: 查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点.   查找节点 关于节点的查找,是利用选择器完成的. 在上一篇jQuery选择器中已经介绍过了:http://www.cnblogs.com/mengdd/p/4211663.html   插入节点 首先看一个例子,用原生的JavaScript如何创建并添加元素: <!DOCTYPE html> <html> <head>

jquery-ui-draggable-事件捕获对一个元素监听拖动事件并对这个元素的子元素监听点击事件

问题描述 事件捕获对一个元素监听拖动事件并对这个元素的子元素监听点击事件 在不支持事件冒泡的浏览器中.对一个元素监听拖动事件并对这个元素的子元素监听点击事件.这两个事件会冲突.只能执行拖动事件.这种问题怎么解决? 解决方案 Preference元素和监听事件 解决方案二: 说明你没点击到子元素,一般是从子元素冒泡,不支持冒泡不会触发父元素的拖动事件 不过有哪种浏览器不支持冒泡?还没碰到过.. 解决方案三: 浏览器都支持冒泡啊,如果你只用捕获,那么肯定是先监听到父元素的事件,再是子元素,但问题是你

jQuery搜索同辈元素方法_jquery

本文实例讲述了jQuery搜索同辈元素方法.分享给大家供大家参考.具体分析如下: 1. next()方法 用于搜索紧跟在每个匹配元素之后的单个同辈元素,根据需要还可以指定一个选择器对同辈元素进行筛选,语法格式如下: 复制代码 代码如下: next([selector]) $("p").next("p").css("color", "#FCF"); 2. nextAll()方法 用于搜索紧跟在每个匹配元素之后的所有同辈元素,根据

jQuery实现获取元素索引值index的方法_jquery

本文实例讲述了jQuery实现获取元素索引值index的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">