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

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

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


当前回答

这里有一个快速的评论给那些不需要div而只需要blockelement的人。在HTML5中<fieldset disabled="disabled"></fieldset>得到了disabled属性。禁用字段集中的每个表单元素都是禁用的。

其他回答

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

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

它存储元素的原始“disabled”属性。

$('#myDiv *').disable();

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

如果你愿意,你必须模拟上述行为的HTML元素,不支持'disabled'属性,如div。

如果你有一个div,你想要在这个div上支持点击或一个键事件,那么你必须做两件事: 1)当你想禁用div时,像往常一样设置它的disabled属性(只是为了遵守约定) 2)在你的div的点击和/或键处理程序中,检查是否在div上设置了disabled属性。如果是,那么忽略点击或键事件(例如,立即返回)。如果未设置disabled属性,则执行div的单击和/或键事件逻辑。

以上步骤也是浏览器独立的。

如何禁用<div/>的内容

CSS指针事件属性本身并不会禁止子元素滚动,并且对于<div/>元素,IE10及以下版本不支持它(仅针对SVG)。 http://caniuse.com/#feat=pointer-events

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

在除IE10及以下版本的所有浏览器上禁用<div/>的内容。

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

这是给搜索者的,

我做得最好的是,

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