how to disable DIV element and everything inside [duplicate]

Answer 1

Try this!

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

I don't see you using jquery above, but you have it listed as a tag.

Answer 2

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.

You can disable the onclick event, too, by attaching an event that cancels:

;(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.

http://jsfiddle.net/2fPZu/

Answer 3

pure javascript no 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()" />

Answer 4

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

Read More about .off()

Answer 5

The following css statement disables click events

pointer-events:none;