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

Question

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

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

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

Answer 1

Другой способ, в jQuery, состоит в том, чтобы получить внутреннюю высоту, внутреннюю ширину и расположение содержащего DIV и просто наложить другой DIV, прозрачный, поверх того же размера. Это будет работать на всех элементах внутри этого контейнера, а не только на входах.

Помните, что с отключенным JS вы все равно сможете использовать входы / контент DIV. То же самое относится и к приведенным выше ответам.

Answer 2

$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);

Answer 3

Это решение css only / noscript добавляет наложение над набором полей (или div или любым другим элементом), предотвращая взаимодействие:

fieldset { position: relative; }
fieldset[disabled]::after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: all; background: rgba(128,128,128,0.2); }

Если вы хотите невидимое, то есть прозрачное наложение, установите фон, например. rgba (128,128,128,0), так как не будет работать без фона. Вышеуказанное работает для IE9 +. Следующий гораздо более простой CSS будет работать на IE11 +

[disabled] { pointer-events: none; }

Хром

Answer 4

Если вы просто пытаетесь остановить людей, щелкающих мышью, и не испытываете ужасного беспокойства по поводу безопасности - я нашел абсолютный div с z-индексом 99999. Вы не можете щелкнуть или получить доступ к любому контенту, потому что над ним расположен div. Может быть немного проще и это решение только для CSS, пока вам не нужно его удалить.

Answer 5

Простое решение

посмотрите на мой селектор

$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);

fieldsetUserInfo - это div содержит все входы, которые я хочу отключить или включить

надеюсь, это поможет вам

Answer 6

EDIT: Ниже я использовал .on() метод, вместо этого используйте .bind() метод

$(this).bind('click', false);
$(this).bind('contextmenu', false);

, чтобы удалить настройки, вы можете использовать метод .unbind(). Принимая во внимание, что метод .off() не работает должным образом.

 $(this).unbind('click', false);
 $(this).unbind('contextmenu', false);

После исследования сотен решений! узнав о событиях указателя, вот что я сделал.

Как @ Kokodoko , упомянутый в его решении, подходящем для всех браузеров, кроме IE. pointer-events работает в IE11 , а не в более низких версиях. Я также заметил в IE11 , события указателя не работают на дочерних элементах. И, следовательно, если у нас есть что-то вроде ниже

 <a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>

где span - дочерний элемент , настройка pointer-events: none не будет работать

Чтобы преодолеть эту проблему, я написал функцию, которая могла бы действовать как указатель-событие для IE и будет работать в более низких версиях.

В файле JS

DisablePointerEvents(".DisablePointerEvents");


function DisablePointerEvents(classId) {
    $(classId).each(function () {
        $(this).on('click', false );
        $(this).on('contextmenu', false );
    });
}

В файле CSS

.DisablePointerEvents{
    pointer-events: none;
    opacity: 0.7;
    cursor: default;
}

В HTML

 <a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>

Это имитировал сценарий pointer-events, где pointer-events не работает и когда возникает указанное выше условие дочерних элементов.

JS Fiddle для того же

https://jsfiddle.net/rpxxrjxh/