如何禁用所有div内容

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

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

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

1> Kokodoko..：

---

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

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

CSS

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

---

注意:使用此解决方案,您无法使用鼠标或触摸设备与此元素或此元素的任何子元素进行交互.但您仍然可以使用键盘对其进行选项卡.

---

+1正确答案 - 你刚刚节省了我几个小时的工作!*眼泪*和*可能会恋爱* - 所有浏览器也支持它:http://caniuse.com/#feat=pointer-events

---

这只会禁止鼠标事件,但仍然启用控件.

---

我知道它已经很晚了,但是IE 8,IE 9和IE 10都不支持它.只是为了让大家都知道.http://caniuse.com/#feat=pointer-events

---

仍可通过键盘访问.

2> Martin K...：

---

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

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

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

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

---

"手动"选择所有输入......我会试试,但是不应该将div标记为禁用吗？

3> cletus..：

---

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

然后你只需:

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

4> 小智..：

---

这是一个快速评论,为那些不需要div但只是一个块元素的人.在HTML5中获取

了disabled属性.禁用禁用字段集中的每个表单元素.

5> Chris Van Op..：

---

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

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

6> Kokizzu..：

---

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

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

对我很好

7> Marcio Mazzu..：

---

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

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

8> 小智..：

---

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

9> 小智..：

---

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

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

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

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