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

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

CSS

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

补充:

许多人这样评论:“这只会禁止鼠标事件，但控件仍然是启用的”和“你仍然可以通过键盘导航”。你可以将此代码添加到你的脚本中，输入不能以键盘选项卡等其他方式到达。您可以更改此代码以满足您的需要。

$([Parent Container]).find('input').each(function () {
     $(this).attr('disabled', 'disabled');
 });

在form和fieldset标签中包装div:

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

如果你想禁用指针事件，它很容易处理

document.getElementById("appliedDatepicker").style.pointerEvents = "none";

or

如果你想启用，

document.getElementById("appliedDatepicker").style.pointerEvents = "auto";

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

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

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

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

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

如何禁用<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;
}