我的假设是,如果我禁用了一个div,所有的内容也都禁用了。

然而,内容是灰色的,但我仍然可以与它互动。

有办法做到吗?(禁用一个div,让所有的内容也禁用)


当前回答

编辑: 下面我使用了.on()方法,改用.bind()方法

$(this).bind('click', false);
$(this).bind('contextmenu', false);

要删除设置,可以使用.unbind()方法。然而.off()方法并没有像预期的那样工作。

 $(this).unbind('click', false);
 $(this).unbind('contextmenu', false);

在研究了数百种解决方案后!学习指针事件,下面是我所做的。

正如@Kokodoko在他的解决方案中提到的,这适用于除IE之外的所有浏览器。指针事件在IE11中有效,在低版本中无效。我还注意到在IE11中,指针事件在子元素上不起作用。因此,如果我们有下面这样的东西

 <a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>

哪里span -是子元素,设置指针事件:无效

为了克服这个问题,我写了一个函数,它可以作为IE的指针事件,并且可以在较低的版本中工作。

在JS文件中

DisablePointerEvents(".DisablePointerEvents");


function DisablePointerEvents(classId) {
    $(classId).each(function () {
        $(this).on('click', false );
        $(this).on('contextmenu', false );
    });
}

在CSS文件中

.DisablePointerEvents{
    pointer-events: none;
    opacity: 0.7;
    cursor: default;
}

在HTML中

 <a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>

这伪造了指针事件场景,即指针事件不工作,当上述条件的子元素发生时。

JS也一样

https://jsfiddle.net/rpxxrjxh/

其他回答

在jQuery中,另一种方法是获得包含DIV的内部高度、内部宽度和位置,然后简单地覆盖另一个DIV,透明的,在相同大小的上面。这将适用于容器内的所有元素,而不仅仅是输入。

记住,尽管禁用了JS,你仍然可以使用DIVs的输入/内容。上面的答案也一样。

我会使用Cletus函数的改进版本:

 $.fn.disable = function() {
    return this.each(function() {          
      if (typeof this.disabled != "undefined") {
        $(this).data('jquery.disabled', this.disabled);

        this.disabled = true;
      }
    });
};

$.fn.enable = function() {
    return this.each(function() {
      if (typeof this.disabled != "undefined") {
        this.disabled = $(this).data('jquery.disabled');
      }
    });
};

它存储元素的原始“disabled”属性。

$('#myDiv *').disable();

测试浏览器:IE 9、Chrome、Firefox和jquery-1.7.1.min.js

    $(document).ready(function () {
        $('#chkDisableEnableElements').change(function () {
            if ($('#chkDisableEnableElements').is(':checked')) {
                enableElements($('#divDifferentElements').children());
            }
            else {
                disableElements($('#divDifferentElements').children());
            }
        });
    });

    function disableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = true;

            disableElements(el[i].children);
        }
    }

    function enableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = false;

            enableElements(el[i].children);
        }
    }

HTML输入控件可以使用'disabled'属性禁用。一旦为输入控件设置了'disabled'属性,就不会调用与该控件关联的事件处理程序。

如果你愿意,你必须模拟上述行为的HTML元素,不支持'disabled'属性,如div。

如果你有一个div,你想要在这个div上支持点击或一个键事件,那么你必须做两件事: 1)当你想禁用div时,像往常一样设置它的disabled属性(只是为了遵守约定) 2)在你的div的点击和/或键处理程序中,检查是否在div上设置了disabled属性。如果是,那么忽略点击或键事件(例如,立即返回)。如果未设置disabled属性,则执行div的单击和/或键事件逻辑。

以上步骤也是浏览器独立的。

或者只使用css和一个“disabled”类。 注意:不要使用disabled属性。 不需要摆弄jQuery的开/关。 这是非常简单的,跨浏览器工作:

.disabled{
    position: relative;
}
.disabled:after{
    content: "";
    position: absolute;
    width: 100%;
    height: inherit;
    background-color: rgba(0,0,0,0.1);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

然后,在初始化页面或切换按钮时,可以打开或关闭它

if(myDiv !== "can be edited"){
    $('div').removeClass('disabled');
} else{
    $('div').addClass('disabled');
}