Как сделать неактивный контент внутри div?

Как сделать контент в каком-то блоке div неактивным с помощью JavaScript?

Допустим, есть кнопка с командой "Включить/Отключить". И есть один блок div с некоторым текстом. При нажатии кнопки "Включить/Отключить", если это "Включить", вы можете работать с содержимым внутри, но когда "Отключить", вы не можете работать с содержимым внутри блока div.

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

Я запутался, как реализовать такую функцию.

Ответ 1

Без использования наложения вы можете использовать pointer-events: none в div в CSS, но это не работает в IE или Opera.

div.disabled
{
  pointer-events: none;

  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

Ссылка

Ответ 2

div[disabled]
{
  pointer-events: none;
  opacity: 0.7;
}

Приведенный выше код отключает содержимое div. Вы можете отключить div, добавив атрибут disabled.

<div disabled>
  /* Contents */
</div>

Ответ 3

Используя jquery, вы можете сделать что-то вроде этого:

// To disable 
$('#targetDiv').children().attr('disabled', 'disabled');

// To enable
$('#targetDiv').children().attr('enabled', 'enabled');

Вот пример jsFiddle: http://jsfiddle.net/monknomo/gLukqygq/

Вы также можете выбрать дочерние дочерние div и добавить к ним "отключенный" класс css с различными визуальными свойствами в качестве выноски.

//disable by adding disabled class
$('#targetDiv').children().addClass("disabled");

//enable by removing the disabled class
$('#targetDiv').children().removeClass("disabled");

Здесь jsFiddle с примером: https://jsfiddle.net/monknomo/g8zt9t3m/

Ответ 4

если вы хотите скрыть целое деление от вида в другом размере экрана. Вы можете следовать приведенному ниже коду в качестве примера.

div.disabled{
  display: none;
}