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

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

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


当前回答

在jQuery中,另一种方法是获得包含DIV的内部高度、内部宽度和位置,然后简单地覆盖另一个DIV,透明的,在相同大小的上面。这将适用于容器内的所有元素,而不仅仅是输入。

记住,尽管禁用了JS,你仍然可以使用DIVs的输入/内容。上面的答案也一样。

其他回答

在form和fieldset标签中包装div:

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

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

正如许多答案已经澄清的那样,disabled不是DIV属性。然而,xHTML意味着可扩展的HTML。这意味着您可以定义自己的HTML属性(所有Frontend框架都可以这样做)。CSS支持[]属性选择器。

使用标准的HTML和你定义的属性:

<div disabled>My disabled div</div>

使用CSS:

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

注意:你也可以使用带有ID或类名的CSS属性选择器,例如. mydiv [disabled]{…}也可以应用值过滤器,例如:下面的HTML禁用标准属性值div[disabled=disabled]{…}。

使用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元素的W3C规范的一部分,只是表单元素的一部分。

Martin建议的jQuery方法是实现这一目标的唯一万无一失的方法。