Отключить HTML-элемент на стороне клиента (JavaScript)

Question

Я ищу самый простой способ отключить целый элемент HTML (обычно <div>).

Под «отключить» я подразумеваю способ запретить пользователю нажимать на любой из элементов, содержащихся в элементе. Например, если у вас есть форма в отключенном элементе, элементы формы не поймают фокус. Я попытался с методом, который пересекает DOM и отключает каждый элемент, который он находит. Это работает, но кажется слишком сложным, и я ищу более простой метод, например, $("#mydiv").disable()

Я хотел бы запретить пользователю запускать другие события, такие как onmouseover и т. Д., И даже избегать выбора и изменения элементов с помощью клавиатуры. Возможно, какое-то полупрозрачное наложение, охватывающее весь элемент, который нужно отключить, могло бы сработать.

Возможно ли это с помощью jQuery или вы знаете простой способ реализовать его с помощью простого JS?

Answer 1

Плагин jQuery BlockUI - отличный способ для достижения этой цели.

Answer 2

Что-то вроде:

$("#mydiv").find("input").attr('disabled','disabled');

Который в основном находит все элементы input в элементе myDiv и отключает их.

Answer 3

Как насчет div над отключенным div?

<style>

    div.disableall { filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25; background-color: black; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 500; /* just preventing */ }

</style>

И добавьте в div, который вы хотите отключить:

<script type="text/javascript">
    var disable = document.createElement("div");
    disable.className = 'disableall';
    document.getElementById('mydiv').appendChild(disable);
</script>  

Думаю, это должно сработать.

ps: вы должны исправить z-index в соответствии с вашими потребностями

Answer 4

Это метод обхода DOM, но он не такой сложный:

$('#mydiv').find('input').attr('disabled','true');
$('#mydiv *').unbind();

Answer 5

Плагин jQuery BlockUI позволяет имитировать синхронное поведение при использовании AJAX без блокировки браузера [1]. Когда активировано, это предотвратит активность пользователя со страницей (или частью страницы), пока это не будет деактивировано. BlockUI добавляет элементы в DOM, чтобы придать ему вид и поведение, блокирующее взаимодействие с пользователем.

http://malsup.com/jquery/block/

Answer 6

Вы можете создать div, чтобы покрыть это динамически - в прототипе это будет примерно так:

var el = new Element("div", {style: "position: absolute; z-index: 2"});
Element.insert(document.body, el);
Element.clonePosition(el, $("mydiv"));

А затем стиль, как вы хотели бы показать его отключенным.

Но если у вас есть четкое представление о том, какие элементы находятся в области, кажется, что отключение является лучшим вариантом - это предотвращает доступ клавиатуры к элементам - их вкладки и ввод данных или использование клавиши возврата для их активации.

Answer 7

Что быстро приходит на ум, так это использование полупрозрачного div, парящего над старым контентом (с такими параметрами CSS, как "position: relative" и "top: -123px"), или добавление READONLY в ваши формы и кнопки.

Но, какой бы путь вы ни выбрали, помните, что эти изменения относятся только к клиенту. JavaScript, HTML и CSS очень легко изменить во время выполнения. Поэтому будьте готовы к таким вещам и на стороне сервера.