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

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

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


当前回答

这个css仅/noscript解决方案在fieldset(或div或任何其他元素)上添加了一个覆盖层,防止交互:

fieldset { position: relative; }
fieldset[disabled]::after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: all; background: rgba(128,128,128,0.2); }

如果你想要一个不可见的,即透明的覆盖,将背景设置为rgba(128,128,128,0),因为没有背景它将不起作用。 以上操作适用于IE9+。下面这个简单得多的css可以在IE11+上运行

[disabled] { pointer-events: none; }

其他回答

禁用属性不是DIV元素的W3C规范的一部分,只是表单元素的一部分。

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

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

在form和fieldset标签中包装div:

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

我想我得插几句话。

< div >可以在IE8/9中被禁用。我认为这是“不正确的”,这让我感到困惑 不要使用. removeprop(),因为它对元素有永久的影响。使用.prop("disabled", false)代替 $ (" # myDiv”).filter(“输入、文本区域、选择按钮”)。Prop ("disabled", true)更显式,它将捕获一些您在:input中遗漏的表单元素

类似于cletu的解决方案,但我得到了一个错误使用的解决方案,这是解决方案:

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

对我来说还行