Як відключити весь вміст 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');
    }   
}

Вимкнути та ввімкнути елементи введення в роздільний блок за допомогою jQuery має допомогти вам!

Станом на jQuery 1.6, ви повинні використовувати .propзамість того, .attrщоб вимикати.

Я просто хотів згадати цей метод розширення для включення та відключення елементів . Я думаю, що це набагато чистіший спосіб, ніж додавання та видалення атрибутів безпосередньо.

Тоді ви просто робите:

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

Ось короткий коментар для людей, яким не потрібен div, а лише перелом. У HTML5 <fieldset disabled="disabled"></fieldset>отримано відключений атрибут. Кожен елемент форми інвалідного набору полів вимкнено.

Відключений атрибут не є частиною специфікації 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);
        }
    }

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

Вам потрібно моделювати вище поведінку для елементів HTML, які не підтримують атрибут 'disabled', як div, якщо ви хочете.

Якщо у вас є div, і ви хочете підтримати клацання або ключову подію в цьому div, вам потрібно зробити дві речі: 1) Коли ви хочете відключити div, встановіть його атрибут вимкнено як завжди (просто для дотримання конвенція) 2) У обробці клавіш і / або ключів вашого дива перевірте, чи встановлений атрибут вимкнено на діві. Якщо це так, то просто ігноруйте клацання або ключову подію (наприклад, просто поверніться негайно). Якщо атрибут відключений не встановлений, виконайте логіку натискання та / або ключову подію логіки.

Наведені вище кроки також незалежні від браузера.

Одним із способів досягти цього є додавання відключеної опори всім дітям. Цього можна досягти дуже легко:

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

$("#myDiv")знаходить діву, .find("*")отримує всі дочірні вузли на всіх рівнях і.prop('disabled', true) вимикає кожен.

Таким чином весь вміст вимкнено, і ви не можете натискати на них, вкладати їх, прокручувати їх тощо. Також вам не потрібно додавати будь-які класи css.

Оберніть тег у divмежах fieldset:

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

Я подумав, що я підкажу пару нот.

1. <div> можна відключити в IE8 / 9. Я припускаю, що це "неправильно", і це мене відкинуло
2. Не використовуйте .removeProp (), оскільки він має постійний вплив на елемент. Використовуйте .prop ("вимкнено", помилково) замість цього
3. $ ("# myDiv"). filter ("input, textarea, select, button"). prop ("вимкнено", 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;
}

користь тут полягає в тому, що ви не працюєте з класами над дівом, з яким ви хочете працювати

Я використовував би вдосконалену версію функції 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');
      }
    });
};

Яка зберігає оригінальну властивість елемента "вимкнено".

$('#myDiv *').disable();

Як відключити вміст DIV

Сам pointer-eventsвластивість CSS не відключає дочірні елементи прокрутки, і він не підтримується IE10 та under для елементів 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;
}

Нижче представлено більш комплексне рішення для маскування дивів, що дозволяють

• немає окремого 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

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

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не працює і коли виникають вищезазначені умови дочірніх елементів.

Дж. С. Фіддл за те саме

https://jsfiddle.net/rpxxrjxh/

найпростіше рішення

подивіться на мого селектора

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

the fieldsetUserInfodiv містить всі введення, які я хочу відключити або включити

сподіваюся, що це вам допоможе