如何禁用所有div内容

Question

如何禁用所有div内容

javascriptjqueryhtml

356

我原以为如果禁用一个div，所有内容也会被禁用。

然而，内容变灰了，但我仍然可以与它交互。

有没有办法做到这一点？（禁用div并使所有内容也被禁用）

- Juan Manuel

29个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Major · Answer 1

正如许多答案已经澄清的那样，disabled不是一个DIV属性。然而xHTML代表可扩展HTML。这意味着您可以定义自己的HTML属性（所有前端框架也都这样做）。并且CSS支持属性选择器，即[]。

请使用带有您定义的属性的标准HTML：

<div disabled>My disabled div</div>

使用 CSS：

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

注意：您也可以使用CSS属性选择器与ID或类名一起使用，例如.myDiv[disabled] {...}还可以应用值筛选器，例如：以下HTML禁用具有值div[disabled=disabled] {...} 的标准属性。

- tim-montague · Answer 2

如何禁用 `<div/>` 元素的内容

CSS 属性 pointer-events 无法单独禁用子元素的滚动，并且在 IE10 及其以下版本中不支持 <div/> 元素（仅支持 SVG）。 http://caniuse.com/#feat=pointer-events

要在所有浏览器中禁用 <div/> 元素的内容。

JQuery：

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

CSS（层叠样式表）：

.disable {
  opacity: 0.4;
}

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

禁用除IE10及以下版本之外的所有浏览器上的

内容

Jquery：

$("#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;
}

- Syed Nasir Abbas · Answer 3

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

- Sabinia · Answer 4

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

如果您希望为不支持“disabled”属性的HTML元素（如div）模拟上述行为，则需要执行以下操作：

1）当您想要禁用div时，像往常一样设置其禁用属性（只是为了遵守约定）

2）在您的div的单击和/或键处理程序中，检查div上是否设置了禁用属性。如果设置了禁用属性，则忽略单击或键事件（例如立即返回）。如果未设置禁用属性，则执行div的单击和/或键事件逻辑。

以上步骤也适用于所有浏览器。

- Hossein Khalesi · Answer 5

如评论中所述，您仍然可以使用Tab键在元素之间导航以访问元素。因此，我建议这样做：

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

- Shree Krishna · Answer 6

这是给搜索者的，

我做的最好的事情是，

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

- J_sdev · Answer 7

或者使用 CSS 和 "disabled" 类。
注意:不要使用 disabled 属性。
无需在 jQuery on/off 上搞乱。
这种方法更加简单，并且跨浏览器兼容。

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

- Steve11235 · Answer 8

我想提供一些注释。

< div > 可以在IE8/9中禁用。我认为这是“不正确”的，这让我很困惑。
不要使用 .removeProp()，因为它对元素有永久影响。改用 .prop("disabled", false)。
$("#myDiv").filter("input,textarea,select,button").prop("disabled", true) 更加明确，并且会捕获一些你会错过的表单元素 :input 。

- Jtbs · Answer 9

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

- kofifus · Answer 10

以下是一种更全面的解决方案，用于启用divs遮罩

无需单独的CSS
覆盖整个页面或仅限元素
指定遮罩颜色和不透明度
指定Z-index，以便在遮罩上显示弹出窗口
在遮罩上显示沙漏光标
在maksOff上删除遮罩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;
}

使用这个，你可以做到例如：

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

如何禁用所有div内容

如何禁用 <div/> 元素的内容

如何禁用 `<div/>` 元素的内容