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?
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?
Risposte:
Prova a utilizzare il :input
selettore, insieme a un selettore principale:
$("#parent-selector :input").attr("disabled", true);
div
e basta. Se avessi dato più informazioni avrei potuto trovare una soluzione più efficiente.
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');
$('#mydiv').find('input, textarea, button')
.
Per jquery 1.6+, utilizzare .prop()
invece di .attr()
,
$("#parent-selector :input").prop("disabled", true);
o
$("#parent-selector :input").attr("disabled", "disabled");
$(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);
}
}
Semplicemente questa riga di codice disabiliterà tutti gli elementi di input
$('#yourdiv *').prop('disabled', true);
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');
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");
}
}
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;
}
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);
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.
Se il modulo all'interno div
contiene semplicemente l'inserimento di elementi nel modulo, questa semplice query disabiliterà ogni elemento all'interno del form
tag:
<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');
readOnly
, non disabilitati.