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

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

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


当前回答

我只想提到这个用于启用和禁用元素的扩展方法。我认为这比直接添加和删除属性要干净得多。

然后你只需做:

$("div *").disable();

其他回答

编辑: 下面我使用了.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这样的框架来做以下事情:

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#idOfTheDIV :input').attr('disabled', true);
    } else {
        $('#idOfTheDIV :input').removeAttr('disabled');
    }   
}

禁用和启用输入元素在一个Div块使用jQuery应该帮助你!

从jQuery 1.6开始,禁用功能应该使用。prop而不是。attr。

有一些可配置的javascript库可以接收html字符串或dom元素,并去掉不需要的标签和属性。这些被称为html杀菌剂。例如:

DOMPurify 疯狂的 sanitize-html

例如,在DOMPurify中

DOMPurify.sanitize('<div>abc<iframe//src=jAva&Tab;script:alert(3)>def</div>'); 
// becomes <div>abcdef</div>

我会使用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();

禁用属性不是DIV元素的W3C规范的一部分,只是表单元素的一部分。

Martin建议的jQuery方法是实现这一目标的唯一万无一失的方法。