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

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

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


当前回答

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

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

您可以添加以下CSS

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

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

其他回答

在form和fieldset标签中包装div:

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

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

如何禁用<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;
}
$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);

使用JQuery这样的框架来做以下事情:

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

禁用和启用输入元素在一个Div块使用jQuery应该帮助你!

从jQuery 1.6开始,禁用功能应该使用。prop而不是。attr。