Jak wyłączyć całą zawartość div

Zakładałem, że jeśli wyłączyłem div, wszystkie treści również zostały wyłączone.

Jednak zawartość jest wyszarzona, ale nadal mogę z nią korzystać.

Czy jest na to sposób? (wyłącz div i wyłącz wszystkie treści)

Wiele z powyższych odpowiedzi działa tylko na elementy formularza. Prostym sposobem na wyłączenie dowolnego DIV, w tym jego zawartości, jest po prostu wyłączenie interakcji myszy. Na przykład:

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

css

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

Użyj frameworka takiego jak JQuery, aby wykonywać takie czynności jak:

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

Wyłączanie i włączanie elementów wejściowych w bloku Div Korzystanie z jQuery powinno ci pomóc!

Od jQuery 1.6 powinieneś używać .propzamiast .attrdo wyłączania.

Chciałem tylko wspomnieć o tej metodzie rozszerzenia do włączania i wyłączania elementów . Myślę, że jest to o wiele czystszy sposób niż bezpośrednie dodawanie i usuwanie atrybutów.

Następnie po prostu wykonaj:

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

Oto krótki komentarz dla osób, które nie potrzebują div, a jedynie blokadę. W HTML5 <fieldset disabled="disabled"></fieldset>dostałem atrybut disabled. Każdy element formularza w wyłączonym zestawie pól jest wyłączony.

Wyłączony atrybut nie jest częścią specyfikacji W3C dla elementów DIV , tylko dla elementów formularza .

Podejście jQuery sugerowane przez Martina jest jedynym niezawodnym sposobem na osiągnięcie tego celu.

podobne do rozwiązania cletu, ale dostałem błąd przy użyciu tego rozwiązania, oto obejście:

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

działa dobrze na mnie

Możesz użyć tej prostej instrukcji CSS, aby wyłączyć zdarzenia

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

Testowane przeglądarki: IE 9, Chrome, Firefox i 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);
        }
    }

Kontrolki wprowadzania HTML można wyłączyć za pomocą atrybutu „disabled”, jak wiadomo. Po ustawieniu atrybutu „wyłączony” dla kontroli wejściowej, procedury obsługi zdarzeń powiązane z taką kontrolą nie są wywoływane.

Musisz symulować powyższe zachowanie dla elementów HTML, które nie obsługują atrybutu „disabled”, takiego jak div, jeśli chcesz.

Jeśli masz div i chcesz obsługiwać kliknięcie lub kluczowe zdarzenie na tym div, musisz zrobić dwie rzeczy: 1) Jeśli chcesz wyłączyć div, ustaw jego atrybut disabled jak zwykle (tylko w celu zachowania zgodności z konwencja) 2) W modułach obsługi kliknięć i / lub klawiszach div sprawdź, czy atrybut div jest ustawiony na div. Jeśli tak, to po prostu zignoruj ​​zdarzenie kliknięcia lub kluczowe (np. Natychmiast powróć). Jeśli wyłączony atrybut nie jest ustawiony, wykonaj logikę kliknięcia i / lub kluczowe zdarzenie div.

Powyższe kroki są również niezależne od przeglądarki.

Jednym ze sposobów na osiągnięcie tego jest dodanie niepełnosprawnego rekwizytu do wszystkich dzieci div. Możesz to bardzo łatwo osiągnąć:

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

$("#myDiv")znajduje div, .find("*")dostaje wszystkie węzły potomne na wszystkich poziomach i .prop('disabled', true)wyłącza każdy z nich.

W ten sposób cała zawartość jest wyłączona i nie można ich klikać, przechodzić do nich, przewijać itp. Nie trzeba też dodawać żadnych klas css.

Zawiń divwewnątrz fieldsettagu:

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

Myślałem, że wrzucę kilka notatek.

1. <div> można wyłączyć w IE8 / 9. Zakładam, że jest to „niepoprawne” i to mnie wytrąciło
2. Nie używaj .removeProp (), ponieważ ma on stały wpływ na element. Zamiast tego użyj .prop („wyłączone”, false)
3. $ („# myDiv”). filter („input, textarea, select, button”). prop („disabled”, true) jest bardziej wyraźny i będzie przechwytywał niektóre elementy formularza, za którymi byś tęsknił: input

To jest dla poszukiwaczy,

Najlepsze, co zrobiłem, to

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

Jak wspomniano w komentarzach, nadal możesz uzyskać dostęp do elementu, nawigując między elementami za pomocą klawisza Tab. więc polecam to:

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

Jeśli chcesz zachować semantykę wyłączonych w następujący sposób

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

możesz dodać następujący CSS

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

korzyścią jest to, że nie pracujesz z klasami na div, z którymi chcesz pracować

Chciałbym użyć ulepszonej wersji funkcji 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');
      }
    });
};

Który przechowuje oryginalną właściwość „disabled” elementu.

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

Jak wyłączyć zawartość DIV

Sama pointer-eventswłaściwość CSS nie wyłącza przewijania elementów potomnych i nie jest obsługiwana przez IE10 i poniżej dla elementów DIV (tylko dla SVG). http://caniuse.com/#feat=pointer-events

Aby wyłączyć zawartość DIV we wszystkich przeglądarkach.

JavaScript:

$("#myDiv")
  .addClass("disable")
  .click(function () {
    return false;
  });

Css:

.disable {
  opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
  overflow: hidden;
}

Aby wyłączyć zawartość DIV we wszystkich przeglądarkach, z wyjątkiem IE10 i niższych.

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

Poniżej znajduje się bardziej kompleksowe rozwiązanie umożliwiające maskowanie div div

• brak osobnego CSS
• obejmuje całą stronę lub tylko element
• określ kolor maski i krycie
• określ indeks Z, aby wyświetlać wyskakujące okienka nad maską
• pokaż kursor klepsydry nad maską
• usunięcie div maskowania na maksOff, aby inny można było później wyświetlić
• rozciągnij maskę przy zmianie rozmiaru elementu
• zwróć element maski, abyś mógł go stylizować itp

Obejmuje również klepsydrę i klepsydrę, których można używać osobno

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

Dzięki temu możesz na przykład:

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

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

Lub po prostu użyj css i klasy „wyłączonej”.
Uwaga: nie używaj atrybutu disabled.
Nie musisz zadzierać z włączaniem / wyłączaniem jQuery.
Jest to o wiele łatwiejsze i działa w różnych przeglądarkach:

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

Następnie możesz go włączać i wyłączać podczas inicjalizacji strony lub przełączania przycisku

if(myDiv !== "can be edited"){
    $('div').removeClass('disabled');
} else{
    $('div').addClass('disabled');
}

Innym sposobem, w jQuery, byłoby uzyskanie wewnętrznej wysokości, wewnętrznej szerokości i położenia zawierającego DIV, i po prostu nałożenie innego DIV, przezroczystego, na górę tego samego rozmiaru. Będzie to działać na wszystkich elementach w tym kontenerze, a nie tylko na danych wejściowych.

Pamiętaj jednak, że po wyłączeniu JS nadal będziesz mógł korzystać z danych wejściowych / treści DIV. To samo dotyczy powyższych odpowiedzi.

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

To rozwiązanie tylko css / noscript dodaje nakładkę powyżej zestawu pól (lub div lub dowolnego innego elementu), zapobiegając interakcji:

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

Jeśli chcesz mieć niewidoczną, tj. Przezroczystą nakładkę, ustaw tło na np. Rgba (128, 128, 128, 08), ponieważ nie będzie działać bez tła. Powyższe działa dla IE9 +. Poniższy, znacznie prostszy css będzie działał na IE11 +

[disabled] { pointer-events: none; }

Chrom

Jeśli próbujesz po prostu powstrzymać ludzi od klikania i nie martwisz się przerażająco o bezpieczeństwo - znalazłem absolutnie umieszczony div z indeksem z 99999, to dobrze. Nie możesz kliknąć ani uzyskać dostępu do żadnej zawartości, ponieważ div jest na niej umieszczony. Może być nieco prostsze i jest rozwiązaniem CSS, dopóki nie trzeba go usunąć.

Istnieją konfigurowalne biblioteki javascript, które pobierają ciąg html lub element dom i usuwają niepożądane tagi i atrybuty. Są one znane jako środki odkażające HTML . Na przykład:

• DOMPurify
• Szalony
• sanitize-html

Np. W DOMPurify

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

EDYCJA: Poniżej użyłem .on()metody, zamiast tego użyj .bind()metody

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

aby usunąć ustawienie, możesz użyć .unbind()metody. Podczas gdy .off()metoda nie działa zgodnie z oczekiwaniami.

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

Po zbadaniu setek rozwiązań! ucząc się o zdarzeniach wskaźnikowych, poniżej zrobiłem to.

Jak wspomniał @Kokodoko w swoim rozwiązaniu, które jest odpowiednie dla wszystkich przeglądarek oprócz IE. pointer-eventsdziała w IE11, a nie w niższych wersjach. Zauważyłem również w IE11 , że zdarzenia-wskaźniki nie działają na elementach potomnych. A zatem, jeśli mamy coś jak poniżej

 <a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>

gdzie rozpiętość -jest elementem potomnym , ustawienie pointer-events: nonenie będzie działać

Aby rozwiązać ten problem, napisałem funkcję, która może działać jako wskaźnik zdarzeń dla IE i będzie działać w niższych wersjach.

W pliku JS

DisablePointerEvents(".DisablePointerEvents");


function DisablePointerEvents(classId) {
    $(classId).each(function () {
        $(this).on('click', false );
        $(this).on('contextmenu', false );
    });
}

W pliku CSS

.DisablePointerEvents{
    pointer-events: none;
    opacity: 0.7;
    cursor: default;
}

W HTML

 <a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>

To sfałszowało pointer-eventsscenariusz, w którympointer-events nie działa i kiedy występuje powyższy stan elementów potomnych.

JS Fiddle za to samo

https://jsfiddle.net/rpxxrjxh/

rozwiązanie simpleset

spójrz na mój selektor

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

fieldsetUserInfojest div zawiera wszystkie wejścia chcę wyłączony lub Włącz

mam nadzieję, że to ci pomoże