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

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

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

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

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

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

CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оберните divвнутри fieldsetтега:

<fieldset disabled>
<div>your controls</div>
</fieldset>

Я думал, что я сделаю пару записок.

1. <div> можно отключить в IE8 / 9. Я предполагаю, что это "неправильно", и это сбило меня с толку
2. Не используйте .removeProp (), так как он постоянно влияет на элемент. Вместо этого используйте .prop («отключено», false)
3. $ ("# myDiv"). filter ("input, textarea, select, button"). prop ("disabled", true) является более явным и перехватит некоторые элементы формы, которые вы пропустите: input

Это для искателей,

Лучшее, что я сделал,

$('#myDiv *').attr("disabled", true);                   
$('#myDiv *').fadeTo('slow', .6);

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

$("#mydiv")
  .css({"pointer-events" : "none" , "opacity" :  "0.4"})
  .attr("tabindex" , "-1");

Если вы хотите сохранить семантику инвалидов следующим образом

<div disabled="disabled"> Your content here </div>

Вы можете добавить следующий CSS

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

выгода здесь в том, что вы не работаете с классами в div, с которыми хотите работать

Я бы использовал улучшенную версию функции 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();

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

Одно pointer-eventsтолько свойство CSS не отключает прокрутку дочерних элементов, и оно не поддерживается 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;
}

Ниже приведено более полное решение для маскировки div, позволяющее

• нет отдельного CSS
• покрыть всю страницу или просто элемент
• указать цвет маски и непрозрачность
• укажите Z-индекс, чтобы вы могли показывать всплывающие окна над маской
• наведите курсор на маску песочных часов
• удаление маскирующего 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

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");
}

Или просто используйте 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');
}

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

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

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

Это решение 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; }

Хром

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

Существуют настраиваемые библиотеки JavaScript, которые принимают строку html или элемент dom и удаляют нежелательные теги и атрибуты. Они известны как дезинфицирующие средства HTML . Например:

• DOMPurify
• ненормальный
• Sanitize-HTML

Например, в DOMPurify

DOMPurify.sanitize('<div>abc<iframe//src=jAva&Tab;script:alert(3)>def</div>'); 
// becomes <div>abcdef</div>

РЕДАКТИРОВАТЬ: ниже я использовал .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/

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

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

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

fieldsetUserInfoв DIV содержит все входы , которые я хочу , чтобы включить или отключены

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