Я был в предположении, что если я отключил div, все содержимое также было отключено.
Однако содержимое серого, но я все еще могу взаимодействовать с ним.
Есть ли способ сделать это? (отключите div и отключите все содержимое)
Как отключить все содержимое div
Ответ 1
Многие из вышеперечисленных ответов работают только с элементами формы. Простой способ отключить любой DIV, включая его содержимое, - это просто отключить взаимодействие с мышью. Например:
$("#mydiv").addClass("disabledbutton");
CSS
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
Ответ 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 для отключения.
Ответ 3
Я просто хотел упомянуть этот метод расширения для включения и отключения элементов. Я считаю, что это гораздо более чистый способ, чем добавление и удаление атрибутов напрямую.
Затем вы просто выполните:
$("div *").disable();
Ответ 4
Вот быстрый комментарий для людей, которым не нужен div, а просто блок. В HTML5 <fieldset disabled="disabled"></fieldset> появился отключенный атрибут. Каждый элемент формы в отключенном поле отключен.
Ответ 5
Отключенный атрибут не является частью спецификации W3C для элементов DIV, только для .
Подход jQuery, предложенный Мартином, - единственный надежный способ, которым вы это сделаете.
Ответ 6
похож на решение cletu, но я получил ошибку, используя это решение, это обходной путь:
$('div *').prop('disabled',true);
// or
$('#the_div_id *').prop('disabled',true);
отлично работает на меня
Ответ 7
Вы можете использовать эту простую инструкцию CSS для отключения событий
#my-div {
pointer-events:none;
}
Ответ 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);
}
}
Ответ 9
Элементы управления HTML могут быть отключены с помощью атрибута "disabled" , как вы знаете. Когда атрибут "disabled" для элемента управления ввода установлен, обработчики событий, связанные с таким элементом управления, не вызываются.
Вы должны моделировать поведение выше для элементов HTML, которые не поддерживают атрибут "disabled" , например div, если хотите.
Если у вас есть div, и вы хотите поддерживать клик или ключевое событие в этом div, вам нужно сделать две вещи: 1) Если вы хотите отключить div, установите его отключенный атрибут как обычно (только для соответствия этому соглашению) 2) В обработчике div и/или обработчиках ключей проверьте, отключен ли атрибут div в div. Если это так, то просто игнорируйте событие click или key (например, сразу возвращайтесь). Если отключенный атрибут не установлен, выполните логику div и/или ключевое событие.
Вышеуказанные шаги также независимы от браузера.
Ответ 10
Один из способов добиться этого - добавить отключенную опору всем детям из div. Вы можете достичь этого очень легко:
$("#myDiv").find("*").prop('disabled', true);
$("#myDiv") находит div, .find("*") получает вас всех дочерних узлов на всех уровнях, а .prop('disabled', true) отключает каждый.
Таким образом, все содержимое отключено, и вы не можете щелкнуть по ним, перейти к ним, прокрутить их и т.д. Кроме того, вам не нужно добавлять классы css.
Ответ 11
Оберните div в тег fieldset:
<fieldset disabled>
<div>your controls</div>
</fieldset>
Ответ 12
Мне казалось, что я запишу пару заметок.
- <div> можно отключить в IE8/9. Я предполагаю, что это "неправильно", и это отбросило меня.
- Не используйте .removeProp(), так как он оказывает постоянное воздействие на элемент. Вместо этого используйте .prop( "disabled", false)
- $( "# myDiv" ). filter ( "input, textarea, select, button" ). prop ( "disabled", true) более явный и будет захватывать некоторые элементы формы, которые вы пропустите: input
Ответ 13
Это для поисковиков,
Лучшее, что я сделал,
$('#myDiv *').attr("disabled", true);
$('#myDiv *').fadeTo('slow', .6);
Ответ 14
Как упоминалось в комментариях, вы по-прежнему можете получить доступ к элементу, перемещаясь между элементами с помощью клавиши табуляции. поэтому я рекомендую это:
$("#mydiv")
.css({"pointer-events" : "none" , "opacity" : "0.4"})
.attr("tabindex" , "-1");
Ответ 15
Если вы хотите сохранить семантику отключенной, как показано ниже
<div disabled="disabled"> Your content here </div>
вы можете добавить следующий CSS
div[disabled=disabled] {
pointer-events: none;
opacity: 0.4;
}
преимущество здесь в том, что вы не работаете с классами в div, с которыми вы хотите работать с
Ответ 16
Я бы использовал улучшенную версию функции Cletus:
$.fn.disable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") {
$(this).data('jquery.disabled', this.disabled);
this.disabled = true;
}
});
};
$.fn.enable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") {
this.disabled = $(this).data('jquery.disabled');
}
});
};
Сохраняет исходное свойство "disabled" элемента.
$('#myDiv *').disable();
Ответ 17
Как отключить содержимое DIV
Свойство CSS pointer-events не отключает дочерние элементы от прокрутки и не поддерживается IE10 и ниже для элементов DIV (только для SVG).
http://caniuse.com/#feat=pointer-events
Чтобы отключить содержимое DIV во всех браузерах.
JavaScript:
$("#myDiv")
.addClass("disable")
.click(function () {
return false;
});
Css:
.disable {
opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
overflow: hidden;
}
Чтобы отключить содержимое DIV во всех браузерах, кроме IE10 и ниже.
JavaScript:
$("#myDiv").addClass("disable");
Css:
.disable {
// Note: pointer-events not supported by IE10 and under
pointer-events: none;
opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
overflow: hidden;
}
Ответ 18
Ниже приведено более полное решение для маскировки div, позволяющих
- нет отдельного CSS
- охватывает всю страницу или только элемент
- указать цвет маски и непрозрачность
- укажите Z-index, чтобы вы могли отображать всплывающие окна по маске
- показать курсор песочных часов над маской
- удаление маскирующего div на maksOff, поэтому другое может быть показано позже
- растягивающая маска при изменении размера элемента
- вернуть элемент маски, чтобы вы могли его стиль и т.д.
Также включен hourglassOn и hourglassOff, которые можно использовать отдельно
// elemOrId - jquery element or element id, defaults to $('<body>')'
// settings.color defaults to 'transparent'
// settings.opacity defaults to 1
// settings.zIndex defaults to 2147483647
// if settings.hourglasss==true change cursor to hourglass over mask
function maskOn(elemOrId, settings) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
var maskDiv=elem.data('maskDiv');
if (!maskDiv) {
maskDiv=$('<div style="position:fixed;display:inline"></div>');
$('body').append(maskDiv);
elem.data('maskDiv', maskDiv);
}
if (typeof settings==='undefined' || settings===null) settings={};
if (typeof settings.color==='undefined' || settings.color===null) settings.color='transparent';
if (typeof settings.opacity==='undefined' || settings.opacity===null) settings.opacity=1;
if (typeof settings.zIndex==='undefined' || settings.zIndex===null) settings.zIndex=2147483647;
if (typeof settings.hourglass==='undefined' || settings.hourglass===null) settings.hourglass=false;
// stretch maskdiv over elem
var offsetParent = elem.offsetParent();
var widthPercents=elem.outerWidth()*100/offsetParent.outerWidth()+'%';
var heightPercents=elem.outerHeight()*100/offsetParent.outerHeight()+'%';
maskDiv.width(widthPercents);
maskDiv.height(heightPercents);
maskDiv.offset($(elem).offset());
// set styles
maskDiv[0].style.backgroundColor = settings.color;
maskDiv[0].style.opacity = settings.opacity;
maskDiv[0].style.zIndex = settings.zIndex;
if (settings.hourglass) hourglassOn(maskDiv);
return maskDiv;
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
function maskOff(elemOrId) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
var maskDiv=elem.data('maskDiv');
if (!maskDiv) {
console.log('maskOff no mask !');
return;
}
elem.removeData('maskDiv');
maskDiv.remove();
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
// if decendents is true also shows hourglass over decendents of elemOrId, defaults to true
function hourglassOn(elemOrId, decendents) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
if (typeof decendents==='undefined' || decendents===null) decendents=true;
if ($('style:contains("hourGlass")').length < 1) $('<style>').text('.hourGlass { cursor: wait !important; }').appendTo('head');
if ($('style:contains("hourGlassWithDecendents")').length < 1) $('<style>').text('.hourGlassWithDecendents, .hourGlassWithDecendents * { cursor: wait !important; }').appendTo('head');
elem.addClass(decendents ? 'hourGlassWithDecendents' : 'hourGlass');
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
function hourglassOff(elemOrId) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
elem.removeClass('hourGlass');
elem.removeClass('hourGlassWithDecendents');
}
function elemFromParam(elemOrId) {
var elem;
if (typeof elemOrId==='undefined' || elemOrId===null)
elem=$('body');
else if (typeof elemOrId === 'string' || elemOrId instanceof String)
elem=$('#'+elemOrId);
else
elem=$(elemOrId);
if (!elem || elem.length===0) {
console.log('elemFromParam no element !');
return null;
}
return elem;
}
С этим вы можете сделать, например:
maskOn(); // transparent page mask
maskOn(null, {color:'gray', opacity:0.8}); // gray page mask with opacity
maskOff(); // remove page mask
maskOn(div); // transparent div mask
maskOn(divId, {color:'gray', hourglass:true}); // gray div mask with hourglass
maskOff(div); // remove div mask
см. jsfiddle
Ответ 19
function disableItems(divSelector){
var disableInputs = $(divSelector).find(":input").not("[disabled]");
disableInputs.attr("data-reenable", true);
disableInputs.attr("disabled", true);
}
function reEnableItems(divSelector){
var reenableInputs = $(divSelector).find("[data-reenable]");
reenableInputs.removeAttr("disabled");
reenableInputs.removeAttr("data-reenable");
}
Ответ 20
Или просто используйте CSS и "отключенный" класс.
Примечание: не используйте отключенный атрибут.
Не нужно связываться с JQuery вкл/выкл.
Это намного проще и работает кросс-браузерно:
.disabled{
position: relative;
}
.disabled:after{
content: "";
position: absolute;
width: 100%;
height: inherit;
background-color: rgba(0,0,0,0.1);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Затем вы можете включить и выключить его при инициализации вашей страницы или переключении кнопки
if(myDiv !== "can be edited"){
$('div').removeClass('disabled');
} else{
$('div').addClass('disabled');
}
Ответ 21
Другим способом, в jQuery, было бы получить внутреннюю высоту, внутреннюю ширину и позиционирование содержащего DIV и просто наложить еще один DIV, прозрачный, поверх того же размера. Это будет работать на всех элементах внутри этого контейнера, а не только на входах.
Помните, что если JS отключен, вы все равно сможете использовать входы/содержимое DIVs. То же самое касается и вышеупомянутых ответов.
Ответ 22
$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);
Ответ 23
Это решение 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; }
Chrome
Ответ 24
Если вы просто пытаетесь остановить нажатие людей и не ужасно беспокоитесь о безопасности - я нашел абсолютный помещенный div с z-индексом 99999, это хорошо. Вы не можете щелкнуть или получить доступ к любому содержимому, потому что над ним размещен div. Возможно, это будет немного проще и будет единственным решением для CSS, пока вам не понадобится его удалить.
Ответ 25
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 для того же
Ответ 26
решение для симплекса
посмотри мой селектор
$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);
fieldsetUserInfo - div содержит все входы, которые я хочу отключить, или Включить
надеюсь, что это поможет вам