如何禁用 DIV 元素和里面的一切

我需要禁用一个 DIV 和它的所有内容使用 Javascript

<div disabled="true">

以前对我有用，但是不知道为什么现在不管用了，我不明白为什么。

在 IE10中: 文本“ Click Me”没有变成灰色，单击处理程序仍然可以工作。

我实际上需要这个工作为 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>
652035 次浏览
小开
最佳答案

试试这个！

$("#test *").attr("disabled", "disabled").off('click');

我没有看到您使用上面的 jquery，但是您将它列为一个标记。

小开

我认为内联脚本很难停止，你可以试试这个:

<div id="test">
<div>Click Me</div>
</div>

剧本:

$(function () {
$('#test').children().click(function(){
alert('hello');
});
$('#test').children().off('click');
});

检查小提琴，看看有没有用

阅读更多关于.off ()

小开

您不能使用“禁用”来禁用单击事件。我不知道它是如何在 IE6-9中工作的，但是它在 Chrome 上不工作，而且它在 IE10上也不应该像那样工作。

您也可以通过附加一个取消的事件来禁用 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;
}
}());

此外，直接在节点上设置“禁用”并不一定要添加属性——使用 setAttribute 可以。

Http://jsfiddle.net/2fpzu/

小开

下面的 css 语句禁用单击事件

pointer-events:none;
小开

纯 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()" />


提交答案