Как отключить все содержимое 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, а просто блок-элемент. В 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 не установлен, выполните логику событий click и/или key вашего div.

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

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

1. можно отключить в IE8/9. Я предполагаю, что это "неверно", и это сбило меня с толку
2. не использовать .removeProp(), поскольку он оказывает постоянное влияние на элемент. Использовать.prop ("disabled", false) вместо
3. $("#myDiv").фильтр ("input,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, поэтому другой может быть показан позже
• растянуть маску, когда элемент изменить размер
• верните элемент маски, чтобы вы могли стилизовать его и т. д.

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

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

хром

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

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

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

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

the 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);

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

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

https://jsfiddle.net/rpxxrjxh/