Javascript 如何禁用所有div内容

我的假设是，如果我禁用了一个div，那么所有内容也会被禁用

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

---

有办法吗？（禁用div并同时禁用所有内容）

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

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

我应该帮助你

---

从jQuery1.6开始，应该使用

.prop

而不是

.attr

来禁用

禁用属性不属于W3C规范的一部分，仅适用于

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

我只想提一下。我认为这比直接添加和删除属性要干净得多

然后你只需做：

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

---

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

---

但是请记住，禁用JS后，您仍然可以使用DIVs输入/内容。上面的答案也是一样。

我想我应该插上几个音符

可以在IE8/9中禁用。我认为这是“不正确的”，这让我很反感

不要使用.removeProp（），因为它对元素有永久影响。改为使用.prop（“禁用”，false）

$（“#myDiv”）.filter（“input，textarea，select，button”）.prop（“disabled”，true）更显式，它将捕获一些表单元素，这些元素在输入时可能会丢失

---

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

---

如您所知，可以使用“disabled”属性禁用HTML输入控件。设置输入控件的“disabled”属性后，将不会调用与此类控件关联的事件处理程序

如果愿意，您必须为不支持“disabled”属性（如div）的HTML元素模拟上述行为

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

---

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

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

$（文档）.ready（函数（）{
$（'#chkdisableenablelements'）。更改（函数（）{
if（$（'#chkDisableEnableElements'）。是（':checked'））{
enableElements（$（'#divDifferenceElements'）.children（）；
}
否则{
disableElements（$（'#divDifferenceElements'）.children（）；
}
});
});
功能禁用元素（el）{
对于（变量i=0；i

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

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

---

对我来说很好

上面的许多答案只对表单元素有效。禁用任何DIV（包括其内容）的一种简单方法是只禁用鼠标交互。例如：

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

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

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

CSS

补充：

---

许多人这样评论：“这只会禁止鼠标事件，但控件仍然处于启用状态”和“您仍然可以通过键盘导航”。您可以将此代码添加到脚本中，但无法通过键盘选项卡等其他方式访问输入。您可以更改此代码以满足您的需要

$([Parent Container]).find('input').each(function () {
     $(this).attr('disabled', 'disabled');
 });

---

此仅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（128128,0），因为没有背景它将无法工作。 以上内容适用于IE9+。以下更简单的css将用于IE11+

[disabled] { pointer-events: none; }

---

Chrome

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

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

如何禁用DIV的内容 CSS

pointer events

属性本身并不禁止子元素滚动，IE10及以下版本不支持DIV元素（仅适用于SVG）。

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

Javascript:

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

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

Css:

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

Javascript:

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

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

Css:

---

下面是一个更全面的屏蔽div的解决方案

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

还包括可单独使用的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;
}

---

如果你只是想阻止人们点击，而不担心安全问题，请参见

——我发现一个z指数为99999的绝对位置div可以排序。您无法单击或访问任何内容，因为div位于其上方。可能会更简单一点，在您需要删除它之前，它只是一个CSS解决方案。

这是为搜索者准备的，

我所做的最好的就是

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

编辑： 下面我使用了

.on（）

方法，而不是使用

.bind（）

方法<

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

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

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

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

DisablePointerEvents(".DisablePointerEvents");


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

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

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

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

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

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

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

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

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");
}

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

.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');
}

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

<div disabled>My disabled div</div>

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