Come disabilitare tutto il contenuto div

Pensavo che se avessi disabilitato un div, anche tutti i contenuti sarebbero stati disabilitati.

Tuttavia, il contenuto è in grigio ma posso ancora interagire con esso.

C'è un modo per farlo? (disabilita un div e disattiva anche tutto il contenuto)

Molte delle risposte di cui sopra funzionano solo sugli elementi del modulo. Un modo semplice per disabilitare qualsiasi DIV incluso il suo contenuto è semplicemente disabilitare l'interazione del mouse. Per esempio:

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

css

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

Usa un framework come JQuery per fare cose come:

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

Disabilitare e abilitare gli elementi di input in un blocco div usando jQuery dovrebbe aiutarti!

A partire da jQuery 1.6, è necessario utilizzare .propinvece di .attrdisabilitare.

Volevo solo menzionare questo metodo di estensione per abilitare e disabilitare gli elementi . Penso che sia un modo molto più pulito rispetto all'aggiunta e alla rimozione diretta degli attributi.

Quindi fai semplicemente:

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

Ecco un breve commento per le persone che non hanno bisogno di un div ma solo di un blockelement. In HTML5 ha <fieldset disabled="disabled"></fieldset>ottenuto l'attributo disabilitato. Ogni elemento del modulo in un set di campi disabilitato è disabilitato.

L'attributo disabilitato non fa parte delle specifiche W3C per gli elementi DIV , ma solo per gli elementi del modulo .

L'approccio jQuery suggerito da Martin è l'unico modo infallibile per farlo.

simile alla soluzione di Cletu, ma ho riscontrato un errore durante l'utilizzo di tale soluzione, questa è la soluzione alternativa:

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

funziona bene con me

È possibile utilizzare questa semplice istruzione CSS per disabilitare gli eventi

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

Browser testati: IE 9, Chrome, Firefox e 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);
        }
    }

Un modo per raggiungere questo obiettivo è quello di aggiungere l'elica disabilitata a tutti i bambini del div. Puoi raggiungerlo molto facilmente:

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

$("#myDiv")trova il div, .find("*")ti prende tutti i nodi figlio in tutti i livelli e .prop('disabled', true)disabilita ognuno.

In questo modo tutto il contenuto è disabilitato e non è possibile fare clic su di essi, fare clic su una scheda, scorrere, ecc. Inoltre, non è necessario aggiungere alcuna classe CSS.

I controlli di input HTML possono essere disabilitati usando l'attributo 'disabilitato' come sai. Una volta impostato l'attributo "disabilitato" per un controllo di input, i gestori di eventi associati a tale controllo non vengono richiamati.

Devi simulare il comportamento sopra per gli elementi HTML che non supportano l'attributo "disabilitato" come div, se lo desideri.

Se hai un div e vuoi supportare il clic o un evento chiave su quel div, allora devi fare due cose: 1) Quando vuoi disabilitare il div, imposta il suo attributo disabilitato come al solito (solo per rispettare convenzione) 2) Nel click del tuo div e / o gestori chiave, controlla se l'attributo disabilitato è impostato sul div. In tal caso, ignora semplicemente il clic o l'evento chiave (ad esempio, ritorna immediatamente). Se l'attributo disabilitato non è impostato, fai il clic del tuo div e / o la logica degli eventi chiave.

I passaggi sopra sono anche indipendenti dal browser.

Avvolgi divall'interno di un fieldsettag:

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

Ho pensato di aggiungere un paio di note.

1. <div> può essere disabilitato in IE8 / 9. Presumo che questo sia "errato", e mi ha buttato via
2. Non utilizzare .removeProp (), poiché ha un effetto permanente sull'elemento. Utilizzare invece .prop ("disabled", false)
3. $ ("# myDiv"). filter ("input, textarea, select, button"). prop ("disabled", true) è più esplicito e catturerà alcuni elementi del modulo che ti mancheranno: input

Questo è per i ricercatori,

Il meglio che ho fatto è

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

Come menzionato nei commenti, puoi comunque accedere agli elementi navigando tra gli elementi utilizzando il tasto Tab. quindi consiglio questo:

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

Se si desidera mantenere la semantica dei disabili come segue

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

potresti aggiungere il seguente CSS

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

il vantaggio qui è che non stai lavorando con le classi sul div con cui vuoi lavorare

Vorrei usare una versione migliorata della funzione di 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');
      }
    });
};

Che memorizza la proprietà originale "disabilitata" dell'elemento.

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

Come disabilitare il contenuto di un DIV

La pointer-eventsproprietà CSS da sola non disabilita lo scorrimento degli elementi figlio e non è supportata da IE10 e per gli elementi DIV (solo per SVG). http://caniuse.com/#feat=pointer-events

Per disabilitare il contenuto di un DIV su tutti i browser.

Javascript:

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

Css:

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

Per disabilitare il contenuto di un DIV su tutti i browser, tranne IE10 e versioni precedenti.

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

Di seguito è una soluzione più completa per l'abilitazione dei div di mascheramento

• nessun CSS separato
• coprire l'intera pagina o solo un elemento
• specifica il colore e l'opacità della maschera
• specifica Z-index in modo da poter mostrare i popup sulla maschera
• mostra un cursore a clessidra sopra la maschera
• rimuovendo il div mascheramento su maksOff in modo che uno diverso possa essere mostrato in seguito
• maschera elastica quando si ridimensiona l'elemento
• restituisci l'elemento maschera in modo da poterlo modellare ecc

Sono inclusi anche clessidra e clessidra che possono essere utilizzati separatamente

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

Con questo puoi fare ad esempio:

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

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

O semplicemente usa CSS e una classe "disabilitata".
Nota: non utilizzare l'attributo disabilitato.
Non c'è bisogno di pasticciare con jQuery on / off.
Questo è molto più semplice e funziona su più browser:

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

Quindi puoi accenderlo e spegnerlo quando si inizializza la pagina o si attiva / disattiva un pulsante

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

Un altro modo, in jQuery, sarebbe quello di ottenere l'altezza interna, la larghezza interna e il posizionamento del DIV contenente, e semplicemente sovrapporre un altro DIV, trasparente, sopra la stessa dimensione. Questo funzionerà su tutti gli elementi all'interno di quel contenitore, anziché solo sugli input.

Ricorda però, con JS disabilitato, sarai comunque in grado di utilizzare gli input / contenuti DIV. Lo stesso vale anche per le risposte precedenti.

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

Questa soluzione css only / noscript aggiunge una sovrapposizione sopra un fieldset (o un div o qualsiasi altro elemento), impedendo l'interazione:

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

Se si desidera un overlay invisibile, cioè trasparente, impostare lo sfondo su ad esempio rgba (128,128,128,0), poiché non funzionerà senza uno sfondo. Quanto sopra funziona per IE9 +. I seguenti CSS molto più semplici funzioneranno su IE11 +

[disabled] { pointer-events: none; }

Cromo

Se stai semplicemente cercando di impedire alle persone di fare clic e non sei terribilmente preoccupato per la sicurezza, ho trovato un div assoluto posizionato con un indice z di 99999 che lo ordina bene. Non puoi fare clic o accedere a nessuno dei contenuti perché il div è posizionato sopra di esso. Potrebbe essere un po 'più semplice ed è una soluzione solo CSS fino a quando non è necessario rimuoverlo.

Esistono librerie javascript configurabili che accettano una stringa html o un elemento dom e rimuovono tag e attributi indesiderati. Questi sono noti come disinfettanti html . Per esempio:

• DOMPurify
• folle
• sanitize-html

Ad esempio in DOMPurify

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

EDIT: di seguito ho usato il .on()metodo, invece utilizzare il .bind()metodo

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

per rimuovere le impostazioni, è possibile utilizzare il .unbind()metodo Considerando che il .off()metodo non funziona come previsto.

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

Dopo aver ricercato centinaia di soluzioni! conoscere gli eventi puntatore, di seguito è quello che ho fatto.

Come ha menzionato @Kokodoko nella sua soluzione adatta a tutti i browser tranne IE. pointer-eventsfunziona in IE11 e non nelle versioni inferiori. Ho anche notato in IE11 , gli eventi puntatore non funzionano sugli elementi figlio. E quindi se abbiamo qualcosa come sotto

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

dove span -è l'elemento figlio , l'impostazione pointer-events: nonenon funzionerà

Per ovviare a questo problema ho scritto una funzione che potrebbe fungere da puntatore-eventi per IE e funzionerà nelle versioni inferiori.

Nel file JS

DisablePointerEvents(".DisablePointerEvents");


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

Nel file CSS

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

In HTML

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

Ciò ha simulato lo pointer-eventsscenario in cui non pointer-eventsfunziona e quando si verificano le condizioni precedenti degli elementi figlio.

JS Fiddle per lo stesso

https://jsfiddle.net/rpxxrjxh/

la soluzione simpleset

guarda il mio selettore

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

il fieldsetUserInfodiv è contiene tutti gli ingressi che voglio disabilitare o abilitare

spero che questo ti aiuti