如何禁用所有div内容

时间：2009-03-12 18:07:25

标签： javascript jquery html

我假设如果我禁用了div，则所有内容也被禁用。

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

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

28 个答案:

答案 0 :(得分：426)

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

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

CSS 

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

答案 1 :(得分：145)

使用像JQuery这样的框架来执行以下操作：

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

Disable And Enable Input Elements In A Div Block Using jQuery可以帮到你！

从jQuery 1.6开始，您应该使用.prop代替.attr来禁用。

答案 2 :(得分：50)

我只是想提一下this extension method for enabling and disabling elements。我认为这比直接添加和删除属性更简洁。

然后你只需：

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

答案 3 :(得分：20)

这是一个快速评论，为那些不需要div但只需要一个块元素的人。在HTML5中<fieldset disabled="disabled"></fieldset>获取了禁用的属性。禁用的字段集中的每个表单元素都被禁用。

答案 4 :(得分：16)

已禁用的属性不属于DIV elements的W3C规范，仅适用于form elements。

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

答案 5 :(得分：11)

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

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

对我有用

答案 6 :(得分：11)

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

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

答案 7 :(得分：6)

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

答案 8 :(得分：4)

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

如果您愿意，您必须为不支持div等“禁用”属性的HTML元素模拟上述行为。

如果您有div，并且想要支持该div上的click或key事件，那么您必须做两件事： 1）当你想要禁用div时，像往常一样设置它的disabled属性（只是为了符合约定） 2）在div的click和/或键处理程序中，检查div上是否设置了disabled属性。如果是，则只需忽略点击或按键事件（例如，立即返回）。如果未设置disabled属性，则执行div的单击和/或键事件逻辑。

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

答案 9 :(得分：4)

实现这一目标的一种方法是将禁用的道具添加到div的所有子项中。您可以非常轻松地实现这一目标：

$("#myDiv")

.find("*")找到div，.prop('disabled', true)可以获取所有级别的所有子节点，并{{1}}禁用每个节点。

这样，所有内容都被禁用，您无法单击它们，选项卡，滚动它们等。此外，您不需要添加任何CSS类。

答案 10 :(得分：2)

如果您想保持禁用的语义如下

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

你可以添加以下CSS 

export PATH="/Users/sugawara/.rbenv/shims:${PATH}"
export RBENV_SHELL=bash
source '/usr/local/Cellar/rbenv/1.1.1/libexec/../completions/rbenv.bash'
command rbenv rehash 2>/dev/null
rbenv() {
  local command
  command="$1"
  if [ "$#" -gt 0 ]; then
    shift
  fi

  case "$command" in
  rehash|shell)
    eval "$(rbenv "sh-$command" "$@")";;
  *)
    command rbenv "$command" "$@";;
  esac
}

这样做的好处是您不会使用您想要使用的div上的类

答案 11 :(得分：2)

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

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

答案 12 :(得分：2)

我以为我会写几个笔记。

  1. ＆LT; div>可以在IE8 / 9中禁用。我认为这是“不正确的”，它让我失望
  2. 不要使用.removeProp（），因为它对元素有永久影响。使用.prop（“disabled”，false）代替
  3. $（“＃myDiv”）。filter（“input，textarea，select，button”）。prop（“disabled”，true）更加明确，并且会捕获一些你会错过的表单元素：input

答案 13 :(得分：2)

这是针对搜索者的，

我做的最好的是，

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

答案 14 :(得分：1)

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

使用标准 HTML 和您定义的属性：

<div disabled>My disabled div</div>

使用 CSS：

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

注意：您也可以使用带有 ID 或类名称的 CSS 属性选择器，例如.myDiv[disabled] {...} 也可以应用值过滤器，例如：以下 HTML 禁用值为 div[disabled=disabled] {...} 的标准属性。

答案 15 :(得分：1)

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

答案 16 :(得分：1)

或者只使用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');
}

答案 17 :(得分：1)

以下是一个更全面的屏蔽div启用

的解决方案
  • 没有单独的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

答案 18 :(得分：1)

如何禁用DIV的内容

仅CSS pointer-events属性不会禁用子元素滚动，IE10不支持它，DAL元素不支持（仅适用于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;
}

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

使用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;
}

答案 19 :(得分：1)

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

答案 20 :(得分：0)

  

简单的解决方案

看看我的选择器

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

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

希望这可以帮助你

答案 21 :(得分：0)

如果你只是试图阻止人们点击并且不会担心安全性 - 我发现一个绝对放置的div，其z-index为99999就可以了。您无法单击或访问任何内容，因为div位于其上方。可能会更简单，只有CSS解决方案，直到你需要删除它。

答案 22 :(得分：0)

此css only / 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; }

Chrome

答案 23 :(得分：0)

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

答案 24 :(得分：0)

wrpa带有字段集标记的div 

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

答案 25 :(得分：0)

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

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

答案 26 :(得分：-1)

编辑： 下面我使用了.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小提琴同样的

  

https://jsfiddle.net/rpxxrjxh/

答案 27 :(得分：-1)

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

例如在DOMPurify中

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