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

используйте фреймворк, такой как 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();

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

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

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

подобно решению 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.минута.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);
        }
    }

элементы управления вводом HTML можно отключить с помощью атрибута "disabled", как вы знаете. После установки атрибута "disabled" для входного элемента управления обработчики событий, связанные с таким элементом управления, не вызываются.

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

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

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

Я подумал, что я бы скинул пару нот.

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

Это для поисковиков,

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

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

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

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

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

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

Я бы использовал улучшенную версию функции Клетус':

 $.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

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

Ниже представлено более комплексное решение для маскировки divs enabling

• нет отдельного 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

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

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

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

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

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

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

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

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

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

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

это решение только для css/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

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

решение simpleset

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

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

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

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

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

изменить: Ниже я использовал .on() метод, вместо того, чтобы использовать .bind() метод

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

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

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

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

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

 <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 скрипка для того же

https://jsfiddle.net/rpxxrjxh/