如何禁用所有div内容

我当时的假设是，如果禁用div，那么所有内容也会被禁用。

但是，内容为灰色，但我仍然可以与之交互。

有没有办法做到这一点？（禁用div并同时禁用所有内容）

上述许多答案仅适用于表单元素。禁用任何DIV包括其内容的简单方法是仅禁用鼠标交互。例如：

$("#mydiv").addClass("disabledbutton");

的CSS

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

使用类似JQuery的框架来执行以下操作：

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

使用jQuery禁用和启用Div块中的输入元素应该可以帮助您！

从jQuery 1.6开始，您应该使用.prop而不是.attr禁用它。

我只想提及此启用和禁用元素的扩展方法。我认为这是比直接添加和删除属性更简洁的方法。

然后，您只需执行以下操作：

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

对于不需要div只是一个基本元素的人，这里是一个简短的评论。在HTML5中<fieldset disabled="disabled"></fieldset>获得了disable属性。禁用字段集中的每个表单元素均被禁用。

对于DIV元素，disabled属性不是W3C规范的一部分，仅对于表单元素而言。

Martin建议的jQuery方法是实现此目标的唯一简单方法。

类似于cletu的解决方案，但使用该解决方案时出现错误，这是解决方法：

$('div *').prop('disabled',true);
// or
$('#the_div_id *').prop('disabled',true);

对我很好

您可以使用此简单的CSS语句来禁用事件

#my-div {
    pointer-events:none;
}

经过测试的浏览器：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);
        }
    }

如您所知，可以使用“ disabled”属性禁用HTML输入控件。一旦为输入控件设置了“禁用”属性，就不会调用与该控件关联的事件处理程序。

如果需要，您必须为不支持div等不支持'disabled'属性的HTML元素模拟上述行为。

如果您有一个div，并且要支持该div上的click或key事件，则必须做两件事：1）当您要禁用div时，请照常设置其disable属性（只是为了遵守约定）2）在div的单击和/或键处理程序中，检查div上是否设置了disable属性。如果是这样，则只需忽略单击或按键事件（例如，立即返回）。如果未设置Disabled属性，则执行div的click和/或key事件逻辑。

以上步骤也与浏览器无关。

一种方法是将禁用的道具添加到div的所有子级中。您可以轻松实现：

$("#myDiv").find("*").prop('disabled', true);

$("#myDiv")查找div，.find("*")获取所有级别的所有子节点并.prop('disabled', true)禁用每个子节点。

这样，所有内容都将被禁用，并且您无法单击它们，将它们制表到选项卡，对其进行滚动等。而且，您无需添加任何CSS类。

div在fieldset标签内包装：

<fieldset disabled>
<div>your controls</div>
</fieldset>

我以为我会记一些笔记。

1. 可以在IE8 / 9中禁用<div>。我认为这是“错误的”，这让我失望了
2. 不要使用.removeProp（），因为它会对元素产生永久性影响。使用.prop（“ disabled”，false）代替
3. $（“＃myDiv”）。filter（“ input，textarea，select，button”）。prop（“ disabled”，true）更为明确，它将捕获您可能会错过的某些表单元素：input

这是给搜索者的，

我做的最好的是

$('#myDiv *').attr("disabled", true);                   
$('#myDiv *').fadeTo('slow', .6);

如评论中所述，您仍然可以通过使用Tab键在元素之间导航来访问元素。所以我推荐这个：

$("#mydiv")
  .css({"pointer-events" : "none" , "opacity" :  "0.4"})
  .attr("tabindex" , "-1");

如果要保留禁用的语义，如下所示

<div disabled="disabled"> Your content here </div>

您可以添加以下CSS

div[disabled=disabled] {
  pointer-events: none;
  opacity: 0.4;
}

这样做的好处是您不使用要使用的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');
      }
    });
};

其中存储元素的原始“禁用”属性。

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

如何禁用DIV的内容

pointer-events单独的CSS 属性不会禁止子元素滚动，并且IE10及以下版本不支持DIV元素（仅适用于SVG）。 http://caniuse.com/#feat=pointer-events

在所有浏览器上禁用DIV的内容。

Javascript：

$("#myDiv")
  .addClass("disable")
  .click(function () {
    return false;
  });

CSS：

.disable {
  opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
  overflow: hidden;
}

在除IE10及以下版本的所有浏览器上禁用DIV的内容。

Javascript：

$("#myDiv").addClass("disable");

CSS：

.disable {
  // Note: pointer-events not supported by IE10 and under
  pointer-events: none;
  opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
  overflow: hidden;
}

以下是掩盖div启用的更全面的解决方案

• 没有单独的CSS
• 覆盖整个页面或仅覆盖一个元素
• 指定遮罩的颜色和不透明度
• 指定Z索引，以便可以在蒙版上显示弹出窗口
• 在面具上显示沙漏光标
• 删除maksOff上的masking div，以便稍后可以显示另一个
• 调整元素大小时的拉伸蒙版
• 返回mask元素，以便您可以设置其样式等

还包括可以单独使用的hourglassOn和hourglassOff

// elemOrId - jquery element or element id, defaults to $('<body>')'
// settings.color defaults to 'transparent'
// settings.opacity defaults to 1
// settings.zIndex defaults to 2147483647
// if settings.hourglasss==true change cursor to hourglass over mask
function maskOn(elemOrId, settings) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    var maskDiv=elem.data('maskDiv');
    if (!maskDiv) {
        maskDiv=$('<div style="position:fixed;display:inline"></div>');
        $('body').append(maskDiv);
        elem.data('maskDiv', maskDiv);
    }

    if (typeof settings==='undefined' || settings===null) settings={};
    if (typeof settings.color==='undefined' || settings.color===null) settings.color='transparent';
    if (typeof settings.opacity==='undefined' || settings.opacity===null) settings.opacity=1;
    if (typeof settings.zIndex==='undefined' || settings.zIndex===null) settings.zIndex=2147483647;
    if (typeof settings.hourglass==='undefined' || settings.hourglass===null) settings.hourglass=false;

    // stretch maskdiv over elem
    var offsetParent = elem.offsetParent();
    var widthPercents=elem.outerWidth()*100/offsetParent.outerWidth()+'%';
    var heightPercents=elem.outerHeight()*100/offsetParent.outerHeight()+'%';
    maskDiv.width(widthPercents);
    maskDiv.height(heightPercents);
    maskDiv.offset($(elem).offset());

    // set styles
    maskDiv[0].style.backgroundColor = settings.color;
    maskDiv[0].style.opacity = settings.opacity;
    maskDiv[0].style.zIndex = settings.zIndex;

    if (settings.hourglass) hourglassOn(maskDiv);

    return maskDiv;
}

// elemOrId - jquery element or element id, defaults to $('<body>')'
function maskOff(elemOrId) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    var maskDiv=elem.data('maskDiv');
    if (!maskDiv) {
        console.log('maskOff no mask !');
        return;
    }

    elem.removeData('maskDiv');
    maskDiv.remove();
}

// elemOrId - jquery element or element id, defaults to $('<body>')'
// if decendents is true also shows hourglass over decendents of elemOrId, defaults to true
function hourglassOn(elemOrId, decendents) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    if (typeof decendents==='undefined' || decendents===null) decendents=true;

    if ($('style:contains("hourGlass")').length < 1) $('<style>').text('.hourGlass { cursor: wait !important; }').appendTo('head');
    if ($('style:contains("hourGlassWithDecendents")').length < 1) $('<style>').text('.hourGlassWithDecendents, .hourGlassWithDecendents * { cursor: wait !important; }').appendTo('head');
    elem.addClass(decendents ? 'hourGlassWithDecendents' : 'hourGlass');
}

// elemOrId - jquery element or element id, defaults to $('<body>')'
function hourglassOff(elemOrId) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    elem.removeClass('hourGlass');
    elem.removeClass('hourGlassWithDecendents');
}

function elemFromParam(elemOrId) {
    var elem;
    if (typeof elemOrId==='undefined' || elemOrId===null) 
        elem=$('body');
    else if (typeof elemOrId === 'string' || elemOrId instanceof String) 
        elem=$('#'+elemOrId);
    else
        elem=$(elemOrId);

    if (!elem || elem.length===0) {
        console.log('elemFromParam no element !');
        return null;
    }

    return elem;
}

例如，您可以执行以下操作：

maskOn(); // transparent page mask
maskOn(null, {color:'gray', opacity:0.8}); // gray page mask with opacity
maskOff(); // remove page mask
maskOn(div); // transparent div mask
maskOn(divId, {color:'gray', hourglass:true}); // gray div mask with hourglass
maskOff(div); // remove div mask

见jsfiddle

function disableItems(divSelector){
    var disableInputs = $(divSelector).find(":input").not("[disabled]");
    disableInputs.attr("data-reenable", true);
    disableInputs.attr("disabled", true);
}

function reEnableItems(divSelector){
    var reenableInputs = $(divSelector).find("[data-reenable]");
    reenableInputs.removeAttr("disabled");
    reenableInputs.removeAttr("data-reenable");
}

或仅使用CSS和“禁用”类。
注意：请勿使用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');
}

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

但是请记住，禁用JS后，您仍然可以使用DIV的输入/内容。上述答案也是如此。

$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);

此仅css / noscript解决方案在字段集（或div或任何其他元素）上方添加了覆盖图，从而防止了交互：

fieldset { position: relative; }
fieldset[disabled]::after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: all; background: rgba(128,128,128,0.2); }

如果需要不可见的透明覆盖，请将背景设置为rgba（128,128,128,0），因为没有背景就无法使用。以上适用于IE9 +。以下更简单的CSS可以在IE11 +上运行

[disabled] { pointer-events: none; }

铬

如果您只是想阻止人们点击而又不担心安全性-我发现Z索引为99999的绝对位置div可以很好地解决问题。您无法点击或访问任何内容，因为div位于其上方。可能会更简单一些，并且是仅CSS的解决方案，直到需要将其删除为止。

有一些可配置的javascript库，它们吸收html字符串或dom元素，并去除不想要的标签和属性。这些被称为html消毒剂。例如：

• 净化
• 疯
• sanitize-html

例如在DOMPurify中

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

编辑：下面我使用了.on()方法，而不是使用.bind()方法

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

要删除设置，可以使用.unbind()方法。而该.off()方法无法按预期工作。

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

经过研究数百种解决方案！了解指针事件，下面是我的工作。

正如@Kokodoko在他的解决方案中提到的那样，它适用于除IE之外的所有浏览器。只能pointer-events在IE11中使用，而不在较低版本中使用。我还注意到在IE11中，指针事件在子元素上不起作用。因此，如果我们有类似下面的内容

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

其中span-是子元素，设置将pointer-events: none不起作用

为了克服这个问题，我编写了一个函数，该函数可以用作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>

这伪造了不起作用的pointer-events情况pointer-events以及出现上述子元素条件的情况。

JS Fiddle同样

https://jsfiddle.net/rpxxrjxh/

简单解决方案

看看我的选择器

$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);

在fieldsetUserInfo被div包含我要禁用或启用所有输入

希望这对您有帮助