如何禁用所有div内容

2020/10/07 04:41 · javascript ·  · 0评论

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

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

有没有办法做到这一点?(禁用div并同时禁用所有内容)

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

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

的CSS

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

补充:

许多人这样评论:“这只会禁止鼠标事件,但控件仍处于启用状态”和“您仍可以通过键盘导航”。您可以将此代码添加到脚本中,并且无法通过其他方式(例如键盘选项卡)访问输入。您可以更改此代码以适合您的需求。

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

使用类似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方法是实现此目标的唯一简单方法。

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

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

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

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

对我很好

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

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

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

这样,所有内容都将被禁用,并且您无法单击它们,将它们制表到它们,滚动它们等等。而且,您不需要添加任何CSS类。

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

divfieldset标签包装

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

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

如果需要,您必须模拟不支持div这样的“ disabled”属性的HTML元素的上述行为。

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

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

我以为我会记一些笔记。

  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上的mask 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的解决方案,直到需要将其删除为止。

编辑:下面我使用.on()方法,而不是使用.bind()方法

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

要删除设置,可以使用.unbind()方法。而该.off()方法无法正常工作。

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

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

正如@Kokodoko在他的解决方案中提到的那样,它适用于除IE之外的所有浏览器。只能pointer-eventsIE11中使用,而不能在较低版本中使用。我还在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包含我要禁用或启用所有输入

希望这对您有帮助

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

例如在DOMPurify中

DOMPurify.sanitize('<div>abc<iframe//src=jAva&Tab;script:alert(3)>def</div>'); 
// becomes <div>abcdef</div>
本文地址:http://javascript.askforanswer.com/ruhejinyongsuoyoudivneirong.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!