jQuery 如何禁用 DIV 元素和里面的所有内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15555295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to disable DIV element and everything inside
提问by Marquinio
I need to disable a DIV and all it's content using Javascript. I can swear that doing a simple
我需要使用 Javascript 禁用 DIV 及其所有内容。我可以发誓做一个简单的
<div disabled="true">
was working for me before, but for some reason it no longer works. I don't understand why.
以前为我工作，但由于某种原因它不再有效。我不明白为什么。
In IE10: the text "Click Me" is not greyed out and click handler still works.
在 IE10 中：文本“单击我”没有变灰，单击处理程序仍然有效。
I actually need this working for IE10. Below is my code.
我实际上需要为 IE10 工作。下面是我的代码。
<html>
<script>
function disableTest(){
document.getElementById("test").disabled = true;
var nodes = document.getElementById("test").getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++){
nodes[i].disabled = true;
}
}
</script>
<body onload="disableTest();">
<div id="test">
<div onclick="alert('hello');">
Click Me
</div>
</div>
</body>
</html>
采纳答案by Danwilliger
Try this!
尝试这个！
$("#test *").attr("disabled", "disabled").off('click');
I don't see you using jquery above, but you have it listed as a tag.
我没有看到您在上面使用 jquery，但是您将它列为标签。
回答by bukka
The following css statement disables click events
以下 css 语句禁用点击事件
pointer-events:none;
回答by Nikhil sHETH
pure javascript no jQuery
纯 javascript 没有 jQuery
function sah() {
$("#div2").attr("disabled", "disabled").off('click');
var x1=$("#div2").hasClass("disabledDiv");
(x1==true)?$("#div2").removeClass("disabledDiv"):$("#div2").addClass("disabledDiv");
sah1(document.getElementById("div1"));
}
function sah1(el) {
try {
el.disabled = el.disabled ? false : true;
} catch (E) {}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
sah1(el.childNodes[x]);
}
}
}#div2{
padding:5px 10px;
background-color:#777;
width:150px;
margin-bottom:20px;
}
.disabledDiv {
pointer-events: none;
opacity: 0.4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="div1">
<div id="div2" onclick="alert('Hello')">Click me</div>
<input type="text" value="SAH Computer" />
<br />
<input type="button" value="SAH Computer" />
<br />
<input type="radio" name="sex" value="Male" />Male
<Br />
<input type="radio" name="sex" value="Female" />Female
<Br />
</div>
<Br />
<Br />
<input type="button" value="Click" onclick="sah()" />回答by Jai
I think inline scripts are hard to stop instead you can try with this:
我认为内联脚本很难停止，你可以试试这个：
<div id="test">
<div>Click Me</div>
</div>
and script:
和脚本：
$(function () {
$('#test').children().click(function(){
alert('hello');
});
$('#test').children().off('click');
});
CHEKOUT FIDDLE AND SEE IT HELPS
结帐小提琴并看到它有帮助
回答by Difusio
回答by Spencer Lockhart
You can't use "disable" to disable a click event. I don't know how or if it worked in IE6-9, but it didn't work on Chrome, and it shouldn't work on IE10 like that.
您不能使用“禁用”来禁用单击事件。我不知道它如何或是否在 IE6-9 中工作，但它在 Chrome 上不起作用，也不应该像那样在 IE10 上工作。
You can disable the onclick event, too, by attaching an event that cancels:
您也可以通过附加取消的事件来禁用 onclick 事件：
;(function () {
function cancel () { return false; };
document.getElementById("test").disabled = true;
var nodes = document.getElementById("test").getElementsByTagName('*');
console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
nodes[i].setAttribute('disabled', true);
nodes[i].onclick = cancel;
}
}());
Furthermore, setting "disabled" on a node directly doesn't necessarily add the attribute- using setAttribute does.
此外，直接在节点上设置“禁用”不一定会添加属性 - 使用 setAttribute 会。
