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

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

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


当前回答

或者只使用css和一个“disabled”类。 注意:不要使用disabled属性。 不需要摆弄jQuery的开/关。 这是非常简单的,跨浏览器工作:

.disabled{
    position: relative;
}
.disabled:after{
    content: "";
    position: absolute;
    width: 100%;
    height: inherit;
    background-color: rgba(0,0,0,0.1);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

然后,在初始化页面或切换按钮时,可以打开或关闭它

if(myDiv !== "can be edited"){
    $('div').removeClass('disabled');
} else{
    $('div').addClass('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。

在form和fieldset标签中包装div:

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

实现这一点的一种方法是将disabled道具添加到div的所有子元素中。你可以很容易地实现这一点:

$("#myDiv").find("*").prop('disabled', true);

$("#myDiv")找到div, .find("*")得到所有级别的所有子节点,.prop('disabled', true)禁用每个子节点。

这样所有的内容都是禁用的,你不能点击它们,标签到它们,滚动它们,等等。此外,您不需要添加任何css类。

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

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

CSS

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

补充:

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

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

有一些可配置的javascript库可以接收html字符串或dom元素,并去掉不需要的标签和属性。这些被称为html杀菌剂。例如:

DOMPurify 疯狂的 sanitize-html

例如,在DOMPurify中

DOMPurify.sanitize('<div>abc<iframe//src=jAva&Tab;script:alert(3)>def</div>'); 
// becomes <div>abcdef</div>