Gibt es eine Möglichkeit, alle Felder (Textbereich / Textfeld / Option / Eingabe / Kontrollkästchen / Senden usw.) in einem Formular zu deaktivieren, indem nur der übergeordnete Div-Name in jquery / javascript angegeben wird?
Gibt es eine Möglichkeit, alle Felder (Textbereich / Textfeld / Option / Eingabe / Kontrollkästchen / Senden usw.) in einem Formular zu deaktivieren, indem nur der übergeordnete Div-Name in jquery / javascript angegeben wird?
Antworten:
Versuchen Sie, den :input
Selektor zusammen mit einem übergeordneten Selektor zu verwenden:
$("#parent-selector :input").attr("disabled", true);
div
Namen zu tun, und das war's. Wenn ich mehr Informationen bekommen hätte, hätte ich eine effizientere Lösung finden können.
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');
$('#mydiv').find('input, textarea, button')
.
Verwenden Sie für jquery 1.6+ .prop()
anstelle von .attr()
,
$("#parent-selector :input").prop("disabled", true);
oder
$("#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);
}
}
Einfach diese Codezeile deaktiviert alle Eingabeelemente
$('#yourdiv *').prop('disabled', true);
Wie wäre es, wenn Sie nur das HTML-Attribut "deaktiviert" verwenden?
<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>
Wenn Sie deaktiviert in das Feldset einfügen, werden alle Felder in diesem Feldset deaktiviert.
$('fieldset').attr('disabled', 'disabled');
Ich benutze die Funktion unten an verschiedenen Stellen. Funktioniert in Div- oder Button-Elementen in einer Tabelle, solange der rechte Selektor verwendet wird. Nur ": button" würde für mich nicht wieder aktiviert.
function ToggleMenuButtons(bActivate) {
if (bActivate == true) {
$("#SelectorId :input[type='button']").prop("disabled", true);
} else {
$("#SelectorId :input[type='button']").removeProp("disabled");
}
}
Im Folgenden werden alle Eingaben deaktiviert, es kann jedoch keine BTN-Klasse verwendet werden. Außerdem wird eine Klasse hinzugefügt, um die Deaktivierung von CSS zu überschreiben.
$('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');
CSS-Klasse
.disabledClass{
background-color: rgb(235, 235, 228) !important;
}
Für mich funktionierte die akzeptierte Antwort nicht, da ich einige versteckte Asp-Net-Felder hatte, die ebenfalls deaktiviert wurden, sodass ich nur sichtbare Felder deaktivierte
//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);
Verwenden Sie die CSS-Klasse, um zu verhindern, dass die Div-Elemente bearbeitet werden
CSS:
.divoverlay
{
position:absolute;
width:100%;
height:100%;
background-color:transparent;
z-index:1;
top:0;
}
JS:
$('#divName').append('<div class=divoverlay></div>');
Oder fügen Sie den Klassennamen in HTML Tag hinzu. Dadurch wird verhindert, dass die Div-Elemente bearbeitet werden.
readOnly
, machen Sie sie nicht deaktiviert.