如何禁用所有div内容

Question

我假设如果我禁用了div,所有内容也被禁用了.

但是,内容是灰色的,但我仍然可以与它进行交互.

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

Answer 1

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

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

CSS

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

Answer 2

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

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

在Div块中禁用和启用输入元素使用jQuery应该可以帮助您!

从jQuery 1.6开始,您应该使用.prop而不是.attr禁用.

Answer 3

我只是想提一下启用和禁用元素的扩展方法.我认为这比直接添加和删除属性要简洁得多.

然后你只需:

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

Answer 4

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

Answer 5

disabled属性不是DIV元素的W3C规范的一部分,仅适用于表单元素.

Martin提出的jQuery方法是你要实现这一目标的唯一万无一失的方法.

Answer 6

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

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

对我很好

Answer 7

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

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

Answer 8

将 包裹div在fieldset标签内：

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

Answer 9

正如许多答案已经澄清的那样，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 禁用带有 value 的标准属性div[disabled=disabled] {...}。

Answer 10

实现此目的的一种方法是将 disabled 道具添加到 div 的所有子级。你可以很容易地做到这一点：

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

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

这样所有内容都被禁用，你不能点击它们，标签到它们，滚动它们等。此外，你不需要添加任何 css 类。

Answer 11

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

Answer 12

如何禁用a的内容<div/>

CSSpointer-events属性本身不会禁用子元素滚动，并且 IE10 及以下<div/>元素不支持它（仅适用于 SVG）。 http://caniuse.com/#feat=pointer-events

在所有浏览器上禁用 a 的内容<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;
}

<div/>在所有浏览器上禁用 a 的内容，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;
}

Answer 13

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

如果需要，您必须为不支持div等不支持'disabled'属性的HTML元素模拟上述行为。

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

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

Answer 14

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

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

您可以添加以下 CSS

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

这里的好处是你没有在你想要使用的 div 上使用类