我原以为如果禁用一个div，所有内容也会被禁用。
然而，内容变灰了，但我仍然可以与它交互。
有没有办法做到这一点？（禁用div并使所有内容也被禁用）
29个回答
1
我将使用改进版的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();
- koosvdkolk
0
如果要禁用指针事件，这很容易处理
document.getElementById("appliedDatepicker").style.pointerEvents = "none";
或者
如果你想启用，
document.getElementById("appliedDatepicker").style.pointerEvents = "auto";
- pubudu sachintha
0
$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);
- anand
0
这个仅使用CSS / noscript的解决方案在字段集（或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; }
Chrome
- Costas
0
如果你只是想阻止人们点击，而不是非常担心安全问题 - 我发现一个绝对定位的 div，z-index 为 99999 可以很好地解决这个问题。你无法点击或访问任何内容，因为 div 覆盖在上面。这可能会更简单，并且是一种仅使用 CSS 的解决方案，直到你需要将其移除。
- Ukuser32
0
另一种方式是在jQuery中获取包含DIV的内部高度、宽度和定位，然后简单地覆盖另一个DIV，透明，大小相同。这将适用于容器内所有元素，而不仅仅是输入框。
但请记住，如果JS被禁用，您仍将能够使用DIV的输入框/内容。上述答案也是如此。
- TheCarver
2
如果用户通过控件进行制表，那该怎么办？除非您只有使用鼠标导航的用户，否则这对您没有任何帮助。 - Sivvy
但如果与禁用输入一起使用，它可能会很有用。如果叠加的 div 被样式化为半透明，则它是一个很好的视觉指示器，表明该部分已被禁用。 - xr280xr
-1
最简单的解决方案是：
看看我的选择器。
看看我的选择器。
$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);
fieldsetUserInfo 是一个包含所有我想要禁用或启用的输入框的 div。
希望这可以帮到你。
- Basheer AL-MOMANI
-1
编辑：
下面我使用了.on()方法，请改用.bind()方法
$(this).bind('click', false);
$(this).bind('contextmenu', false);
要删除您的设置，可以使用.unbind()方法。而.off()方法不起作用。
$(this).unbind('click', false);
$(this).unbind('contextmenu', false);
经过研究数百种解决方案！学习了有关指针事件的知识，以下是我所做的。
正如@Kokodoko在他的解决方案中提到的那样，这适用于除IE之外的所有浏览器。 pointer-events 在IE11中有效，而在较低版本中无效。 我还注意到，在IE11中，指针事件不适用于子元素。 因此，如果我们有像下面这样的东西
<a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>
其中 span -是子元素，设置 pointer-events: none 无效。
为了克服这个问题，我编写了一个函数，可以在 IE 中充当 pointer-events，并且可以在较低版本中工作。
在 JS 文件中
DisablePointerEvents(".DisablePointerEvents");
function DisablePointerEvents(classId) {
$(classId).each(function () {
$(this).on('click', false );
$(this).on('contextmenu', false );
});
}
CSS 文件中
.DisablePointerEvents{
pointer-events: none;
opacity: 0.7;
cursor: default;
}
在HTML中
<a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>
这是一个关于编程的内容，描述了在子元素出现上述条件时，pointer-events无法正常工作的情况。
JS Fiddle示例链接：
- Preshma Linet Pereira
-1
有可配置的 JavaScript 库，可以接受 HTML 字符串或 DOM 元素，并剥离不需要的标签和属性。这些称为HTML 清理器。例如：
例如，在 DOMPurify 中：
DOMPurify.sanitize('<div>abc<iframe//src=jAva	script:alert(3)>def</div>');
// becomes <div>abcdef</div>
- Lee
2
这与OP所问的问题不太相关。 - Anfelipe
@Anfelipe 尽管如此，它仍然是有效和相关的，如果它在这里之前出现过，对我会很有用。 - Lee
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接