Deaktivieren Sie alle Formularelemente in div

161

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?

— Amirash
quelle

4

Beachten Sie, dass Sie auf diese Weise die Werte dieser Elemente beim Senden des Formulars "verschwinden" lassen - um den Wert beizubehalten readOnly, machen Sie sie nicht deaktiviert.

— Schatten-Assistent ist Ohr für Sie

Mögliches Duplikat von So deaktivieren Sie alle Div-Inhalte

— Michel Ayres

1

Eine Idee könnte darin bestehen, ein Div vor den Steuerelementen auszublenden / anzuzeigen, auf die geklickt werden soll / verhindert wird, sowie deaktivierte Steuerelemente mit CSS.

— Jaider

261

Versuchen Sie, den :inputSelektor zusammen mit einem übergeordneten Selektor zu verwenden:

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

— Andrew Whitaker
quelle

Kann ich damit alle Eingänge in div auf den Wert 0 setzen?

— Jackson5

2

Ich möchte <a> auch deaktivieren ... Mein <a> hat auch einen Klick

— RAJ

7

Zitieren von jQuery : Da: input eine jQuery-Erweiterung ist und nicht Teil der CSS-Spezifikation ist, können Abfragen mit: input die Leistungssteigerung der nativen DOM querySelectorAll () -Methode nicht nutzen. Um die beste Leistung bei Verwendung von: input zur Auswahl von Elementen zu erzielen, wählen Sie die Elemente zuerst mit einem reinen CSS-Selektor aus und verwenden Sie dann .filter (": input").

— Acme

2

@acme: 100% zustimmen, aber die Frage gibt keinen Hinweis darauf, nach welchem Selektor ich möglicherweise filtern könnte. Die einzige Information, die mir gegeben wurde, war, dass der Benutzer in der Lage sein muss, dies mit einem übergeordneten divNamen zu tun, und das war's. Wenn ich mehr Informationen bekommen hätte, hätte ich eine effizientere Lösung finden können.

— Andrew Whitaker

1

Verwenden Sie .prop () anstelle von .attr () (über jquery 1.6)

— Akshay Gundewar

154

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

— Trevor
quelle

4

Es sollte sein ('Eingabe, Textbereich, Schaltfläche'), dass alle Selektoren mit einem Satz von Anführungszeichen in Anführungszeichen gesetzt werden sollten. api.jquery.com/multiple-selector Wenn Sie es so machen, wie Sie es tun, senden Sie mehrere Argumente.

— Ivan Ivanić

2

Hier finden Sie nur Eingaben, Textbereiche und Schaltflächen werden ignoriert. Die Eingabeauswahl: ist der richtige Weg, aber wenn Sie sie explizit auflisten möchten, müssen Sie sie verwenden $('#mydiv').find('input, textarea, button').

— Mark Hildreth

1

... oder einfach $ ('# your-form'). children (). prop ('disabled', true);

— Walv

@walv Ihr Code funktioniert nur, wenn alle Formularelemente ein einziger Nachkomme des Formulars sind. Find () findet alle Elemente in der Liste unabhängig von der absteigenden Ebene. Diese Codezeile ist korrekt, abgesehen von der Verwendung der Requisite anstelle von attr für neue jquery-Versionen.

— Chris O

32

Verwenden Sie für jquery 1.6+ .prop()anstelle von .attr(),

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

oder

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

— Optimus Prime
quelle

2

Sie haben Recht , aber einige Zeit prop Arbeit und einige Zeit nicht arbeiten, speziell in der Ursache der Checkbox und Radiobutton

— damon

Mir ist klar, dass dies ein alter Thread ist, aber dies führt zu einigen Fehlern bei der Verwendung von Typoskript

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

— Syed Nasir Abbas
quelle

4

Einfach diese Codezeile deaktiviert alle Eingabeelemente

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

— Samir Rahimy
quelle

beste Antwort aus meiner Sicht.

— Ajay2707

2

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

— طلحة
quelle

1

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

— AWizardInDallas
quelle

Zwei in einer Lösung großartig.

— 3 Regeln

0

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

— Rohit Dubey
quelle

0

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

— irfandar
quelle

0

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.

— Laddu Vasanth
quelle

0

Nur Texttyp

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

Nur Passworttyp

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

Nur E-Mail-Typ

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

— Manish
quelle