我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
当前回答
正如评论中提到的,您仍然可以通过使用tab键在元素之间导航来访问元素。所以我推荐这个:
$("#mydiv")
.css({"pointer-events" : "none" , "opacity" : "0.4"})
.attr("tabindex" , "-1");
其他回答
在jQuery中,另一种方法是获得包含DIV的内部高度、内部宽度和位置,然后简单地覆盖另一个DIV,透明的,在相同大小的上面。这将适用于容器内的所有元素,而不仅仅是输入。
记住,尽管禁用了JS,你仍然可以使用DIVs的输入/内容。上面的答案也一样。
正如许多答案已经澄清的那样,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]{…}。
测试浏览器: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);
}
}
如果你想禁用指针事件,它很容易处理
document.getElementById("appliedDatepicker").style.pointerEvents = "none";
or
如果你想启用,
document.getElementById("appliedDatepicker").style.pointerEvents = "auto";
在form和fieldset标签中包装div:
<form>
<fieldset disabled>
<div>your controls</div>
</fieldset>
</form>