Как отключить все содержимое div

Question

Я предполагал, что если я отключу div, все содержимое тоже будет отключено.

Тем не менее, содержимое отображается серым цветом, но я все еще могу взаимодействовать с ним.

Есть ли способ сделать это? (отключите div и отключите также весь контент)

Answer 1

Многие из приведенных выше ответов работают только с элементами формы. Простой способ отключить любой DIV, включая его содержимое, - просто отключить взаимодействие с мышью Например:

$("#mydiv").addClass("disabledbutton");

CSS

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

Answer 2

Используйте фреймворк, такой как JQuery, для таких вещей:

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#idOfTheDIV :input').attr('disabled', true);
    } else {
        $('#idOfTheDIV :input').removeAttr('disabled');
    }   
}

Отключение и включение элементов ввода в блоке Div с помощью jQuery должно помочь вам!

Начиная с jQuery 1.6, вы должны использовать .prop вместо .attr для отключения.

Answer 3

Я просто хотел упомянуть этот метод расширения для включения и отключения элементов . Я думаю, что это гораздо более чистый способ, чем непосредственное добавление и удаление атрибутов.

Тогда вы просто делаете:

$("div *").disable();

Answer 4

Вот краткий комментарий для людей, которым нужен не div, а просто блок-элемент. В HTML5 <fieldset disabled="disabled"></fieldset> получил отключенный атрибут. Каждый элемент формы в отключенном наборе полей отключен.

Answer 5

Атрибут disabled не является частью спецификации W3C для элементов DIV , только для элементов формы .

Подход jQuery, предложенный Мартином, - единственный надежный способ добиться этого.

Answer 6

Вы можете использовать этот простой оператор CSS для отключения событий

#my-div {
    pointer-events:none;
}

Answer 7

похоже на решение Cletu, но я получил ошибку при использовании этого решения, это обходной путь:

$('div *').prop('disabled',true);
// or
$('#the_div_id *').prop('disabled',true);

отлично работает на мне

Answer 8

Проверенные браузеры: 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);
        }
    }

Answer 9

Один из способов добиться этого - добавить неработающую опору всем детям div. Вы можете достичь этого очень легко:

$("#myDiv").find("*").prop('disabled', true);

$("#myDiv") находит div, .find("*") возвращает все дочерние узлы на всех уровнях, а .prop('disabled', true) отключает каждый из них.

Таким образом, все содержимое отключено, и вы не можете щелкнуть по ним, перейти к ним, прокрутить и т. Д. Кроме того, вам не нужно добавлять классы CSS.

Answer 10

Элементы управления вводом HTML можно отключить с помощью атрибута disabled, как вы знаете. Когда атрибут «отключен» для элемента управления вводом установлен, обработчики событий, связанные с таким элементом управления, не вызываются.

Вы должны смоделировать описанное выше поведение для элементов HTML, которые не поддерживают атрибут «disabled», например, div, если хотите.

Если у вас есть div, и вы хотите поддерживать щелчок или ключевое событие для этого div, то вам нужно сделать две вещи: 1) Если вы хотите отключить div, установите его отключенный атрибут как обычно (просто для соблюдения соглашения) 2) В обработчиках кликов и / или клавиш вашего дива проверьте, установлен ли отключенный атрибут на div. Если это так, просто проигнорируйте событие нажатия или нажатия клавиши (например, просто немедленно вернитесь). Если отключенный атрибут не задан, выполните логику вашего клика и / или ключевую событие.

Вышеуказанные шаги также не зависят от браузера.