disabilita tutti gli elementi del modulo all'interno di div


162

c'è un modo per disabilitare tutti i campi (textarea / textfield / option / input / checkbox / submit etc) in un modulo dicendo solo il nome div del genitore in jquery / javascript?


4
Si noti che in questo modo i valori di tali elementi "scompaiono" quando si invia il modulo - per preservare il valore, renderli readOnly, non disabilitati.
Shadow Wizard è Ear For You il


1
Un'idea potrebbe essere nascondere / mostrare un div davanti ai controlli che consente / impedisce di fare clic, oltre a controlli disabilitati per stile con CSS.
Jaider,

Risposte:


261

Prova a utilizzare il :inputselettore, insieme a un selettore principale:

$("#parent-selector :input").attr("disabled", true);

posso usarlo per impostare tutti gli ingressi all'interno del div su un valore 0?
jackson5,

2
Voglio disabilitare anche <a> ... Anche il mio <a> ha un clic
RAJ

7
Citando jQuery : poiché: input è un'estensione jQuery e non fa parte della specifica CSS, le query che utilizzano: input non possono sfruttare l'incremento delle prestazioni fornito dal metodo querySelectorAll () DOM nativo. Per ottenere le migliori prestazioni quando si utilizza: input per selezionare gli elementi, selezionare prima gli elementi utilizzando un selettore CSS puro, quindi utilizzare .filter (": input").
Acme,

2
@acme: sono d'accordo al 100% ma la domanda non fornisce alcun suggerimento su quale selettore avrei potuto filtrare. L'unica informazione che mi è stata data è che l'utente deve essere in grado di farlo con un nome genitorediv e basta. Se avessi dato più informazioni avrei potuto trovare una soluzione più efficiente.
Andrew Whitaker,

1
Usa .prop () invece di .attr () (sopra jquery 1.6)
Akshay Gundewar,

154
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');

4
dovrebbe essere ('input, textarea, button') tutti i selettori dovrebbero essere citati con un set di virgolette. api.jquery.com/multiple-selector A modo tuo, stai inviando più argomenti.
Ivan Ivanić,

2
Questo ti troverà solo input, ignorando textareas e pulsanti. Il selettore: input è la strada da percorrere, ma se si desidera elencarli in modo esplicito, è necessario utilizzarli $('#mydiv').find('input, textarea, button').
Mark Hildreth,

1
... o solo $ ('# your-form'). children (). prop ('disabled', true);
walv,

@walv il tuo codice funziona solo se tutti gli elementi del modulo sono un singolo discendente del modulo. Trova () trova tutti gli elementi nell'elenco indipendentemente dal livello discendente. Questa riga di codice è corretta oltre a utilizzare il prop anziché attr per le nuove versioni di jquery.
Chris O

32

Per jquery 1.6+, utilizzare .prop()invece di .attr(),

$("#parent-selector :input").prop("disabled", true);

o

$("#parent-selector :input").attr("disabled", "disabled");

2
hai ragione ma un po 'di tempo funziona e un po' di tempo non funziona, specialmente a causa della casella di controllo e del pulsante di opzione
damon

mi rendo conto che si tratta di un vecchio thread, ma questo genera alcuni errori quando si utilizza dattiloscritto
Simon Price

5
    $(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);
        }
    }

4

Semplicemente questa riga di codice disabiliterà tutti gli elementi di input

$('#yourdiv *').prop('disabled', true);

migliore risposta dalla mia opinione.
Ajay2707,

2

Che ne dici di raggiungere questo utilizzando solo l'attributo HTML 'disabilitato'

<form>
 <fieldset disabled>
  <div class="row">
   <input type="text" placeholder="">
   <textarea></textarea>
   <select></select>
  </div>
  <div class="pull-right">
    <button class="button-primary btn-sm" type="submit">Submit</button>
  </div>
 </fieldset>
</form>

Semplicemente disabilitando nel fieldset tutti i campi all'interno di quel fieldset vengono disabilitati.

$('fieldset').attr('disabled', 'disabled');

1

Sto usando la funzione di seguito in vari punti. Funziona in un div o pulsante in una tabella fintanto che viene utilizzato il selettore destro. Solo ": pulsante" non si riabiliterebbe per me.

function ToggleMenuButtons(bActivate) {
    if (bActivate == true) {
        $("#SelectorId :input[type='button']").prop("disabled", true);
    } else {
        $("#SelectorId :input[type='button']").removeProp("disabled");
    }
}

due in una soluzione eccezionale.
3 regole

0

Di seguito disabiliterà tutto l'input ma non sarà in grado di btn class e anche aggiunta classe per sovrascrivere css disabilitato.

$('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');

classe css

.disabledClass{
  background-color: rgb(235, 235, 228) !important;
}

0

Per me la risposta accettata non ha funzionato dato che avevo alcuni campi nascosti asp net anch'essi disabilitati, quindi ho scelto di disabilitare solo i campi visibili

//just to save the list so we can enable fields later
var list = [];
$('#parent-selector').find(':input:visible:not([readonly][disabled]),button').each(function () {
    list.push('#' + this.id);
});

$(list.join(',')).attr('readonly', true);

0

Utilizzare la classe CSS per impedire la modifica degli elementi Div

CSS:

.divoverlay
{
position:absolute;
width:100%;
height:100%;
background-color:transparent;
z-index:1;
top:0;
}

JS:

$('#divName').append('<div class=divoverlay></div>');

Oppure aggiungi il nome della classe nel tag HTML. Impedirà di modificare gli elementi Div.


0

Solo tipo di testo

$(".form-edit-account :input[type=text]").attr("disabled", "disabled");

Solo il tipo di password

$(".form-edit-account :input[type=password]").attr("disabled", "disabled");

Solo tipo di email

$(".form-edit-account :input[type=email]").attr("disabled", "disabled");

0

Se il modulo all'interno divcontiene semplicemente l'inserimento di elementi nel modulo, questa semplice query disabiliterà ogni elemento all'interno del formtag:

<div id="myForm">
    <form action="">
    ...
    </form>
</div>

Tuttavia, disabiliterà anche oltre all'inserimento di elementi form, poiché i suoi effetti saranno visibili solo sugli elementi di tipo input, quindi adatti principalmente per ogni tipo di modulo!

$('#myForm *').attr('disabled','disabled');

1
Correggi la seconda frase. Sembra dire che il tuo codice disabiliterà gli elementi non di input, ma poi dice che influenzerà solo gli elementi di input. Per favore chiarisci il tuo significato. (Trucco
pulito, comunque
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.