Heim > Web-Frontend > Front-End-Fragen und Antworten > jquery setzt das Eingabefeld auf deaktiviert

jquery setzt das Eingabefeld auf deaktiviert

WBOY
Freigeben: 2023-05-14 13:39:37
Original
1879 Leute haben es durchsucht

Bei der Frontend-Entwicklung ist es häufig erforderlich, das Eingabefeld auf einen deaktivierten Zustand zu setzen, um Fehlbedienungen durch Benutzer zu verhindern oder vertrauliche Daten zu schützen. Eingabefelder können mithilfe der jQuery-Bibliothek einfach deaktiviert werden.

Zuerst müssen wir das Eingabefeld auswählen, das deaktiviert werden soll. Sie können jQuery-Selektoren verwenden, um Eingabefelder auszuwählen, die deaktiviert werden müssen. Selektoren verwenden die Syntax von CSS-Selektoren.

Um beispielsweise das Eingabefeld mit der ID „inputBox“ auszuwählen, können Sie den folgenden Code verwenden:

$("#inputBox")
Nach dem Login kopieren

Anschließend müssen wir die „prop“-Methode von jQuery verwenden, um den deaktivierten Status des Eingabefelds festzulegen. Diese Methode akzeptiert zwei Parameter: Der erste Parameter ist das festzulegende Attribut und der zweite Parameter ist der Wert des Attributs. In diesem Fall müssen wir die Eigenschaft „disabled“ auf „true“ setzen, um das Eingabefeld zu deaktivieren.

Der vollständige Code lautet wie folgt:

$("#inputBox").prop("disabled", true);
Nach dem Login kopieren

Dieser Code deaktiviert das Eingabefeld mit der ID „inputBox“.

Wenn wir den deaktivierten Zustand des Eingabefelds rückgängig machen müssen, können wir denselben Code verwenden, aber das Attribut „disabled“ auf „false“ setzen.

$("#inputBox").prop("disabled", false);
Nach dem Login kopieren

In einigen Fällen ist es möglicherweise nicht offensichtlich genug, das Eingabefeld auf einen deaktivierten Status zu setzen, und Sie müssen möglicherweise CSS-Stile verwenden, um den deaktivierten Status hervorzuheben. Die folgenden Stile können verwendet werden, um den deaktivierten Zustand hervorzuheben:

.disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}
Nach dem Login kopieren

Diese Stile setzen die Hintergrundfarbe auf Grau, die Vordergrundfarbe auf Dunkelgrau und setzen den Mauszeiger auf „nicht zulässig“, um anzuzeigen, dass das Eingabefeld nicht verfügbar ist .

Um diesen Stil zu verwenden, müssen wir die Klasse „deaktiviert“ zum Eingabefeld hinzufügen:

$("#inputBox").addClass("disabled");
Nach dem Login kopieren

Beim Widerrufen des deaktivierten Status müssen wir die Klasse „deaktiviert“ aus dem Eingabefeld entfernen:

$("#inputBox").removeClass("disabled");
Nach dem Login kopieren

In der Entwicklung Setzen Sie das Eingabefeld auf Das Deaktivieren des Status ist eine häufige Aufgabe. Mit jQuery können wir dies leicht erreichen und dem deaktivierten Zustand einen leicht identifizierbaren Stil hinzufügen.

Das obige ist der detaillierte Inhalt vonjquery setzt das Eingabefeld auf deaktiviert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage