Как отключить элемент 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>

Ответы

Ответ 1

Попробуйте это!

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

Я не вижу, что вы используете jquery выше, но вы указали его как тег.

Ответ 2

Следующий оператор css отключает события click

pointer-events:none;

Ответ 3

Я думаю, что встроенные скрипты трудно остановить, вместо этого вы можете попробовать:

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

и script:

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

CHEKOUT FIDDLE И СМОТРИТЕ ПОМОЩЬ

Подробнее о .off()

Ответ 4

У меня нет опыта с этим, но кажется, что BlockUI - это то, что вы ищете. Попробуйте.

Ответ 5

чистый javascript no jQuery

<script type="text/javascript">
    function sah() {
        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]);
            }
        }
    }
</script>

<body>
    <div id="div1">
        <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()" />
</body>

Ответ 6

Вы не можете использовать "disable" для отключения события click. Я не знаю, как или если он работал в 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;
    }
}());

Кроме того, установка "отключено" на node напрямую не обязательно добавляет атрибут - использование setAttribute делает.

http://jsfiddle.net/2fPZu/