如何禁用所有div内容

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

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

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

当前回答

有一些可配置的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>

2020-05-05 20:01:38

其他回答

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

无独立CSS 覆盖整个页面或只覆盖一个元素指定蒙版颜色和不透明度指定Z-index，这样你就可以在蒙版上显示弹出窗口在面具上显示沙漏形光标删除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;
}

你可以这样做，例如:

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

2015-11-20 00:58:37

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

2013-09-20 05:31:17

使用JQuery这样的框架来做以下事情:

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

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

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

2009-03-12 18:09:36

如果你想禁用指针事件，它很容易处理

document.getElementById("appliedDatepicker").style.pointerEvents = "none";

如果你想启用，

document.getElementById("appliedDatepicker").style.pointerEvents = "auto";

2022-06-13 07:15:51

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

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

2009-03-12 18:30:01

如何禁用所有div内容

推荐文章

最新文章

标签