Formularelemente mit JavaScript aktivieren/deaktivieren

Das Element „Aktivieren/Deaktivieren“ nimmt zwei Werte an, nämlich wahr oder falsch. Wenn wir es auf „wahr“ setzen, können wir das Element aktivieren, was bedeutet, dass der Benutzer die Elemente bearbeiten kann, die der Benutzer im Formular oder Textfeld tun möchte, oder andernfalls, wenn es festgelegt ist Wenn der Wert „falsch“ lautet, ist das Element deaktiviert. Das bedeutet, dass Sie im jeweiligen Formular oder im Textfeld keine Änderungen oder Bearbeitungsarbeiten vornehmen können.

Syntax

document.getElementById("element_id").disabled=true/false

Beispiel zum Aktivieren/Deaktivieren von Formularelementen

<!DOCTYPE html>
<head>
<script>
function Degree()
{
if (document.getElementById('pupil').disable == true)
  {
	document.getElementById('Name').removeAttribute('disabled'); document.getElementById('Relation').removeAttribute('disabled');
 }
else
  {
   	document.getElementById('Name').removeAttribute('disabled','disabled');
 	document.getElementById('Relation').removeAttribute('disabled','disabled');
  }
}
</script>
</head>
<body>
<h2> Admission Form</h2>
<form id="orderform" >

Name: <input type= "Text"><br>
DOB:  <input type= "Text"><br>
Does this pupil belong to our school: <input type= "checkbox"  id= "pupil" name="pupil"  value="yes" onclick="javascript:Degree();">Yes
<input type= "checkbox"> No<br>

Name of the pupil: <input type="text" id="Name" name="Name" disabled/>
Relation with the Pupil:<input type="text" id="Relation" name="Relation" disabled />

</form>
</body>
</html>
  • In diesem Programm haben wir gezeigt, wie die Aktivierungs- und Deaktivierungselemente funktionieren
  • Wir haben im Formular die Schaltflächen „Ja“ und „Nein“ verwendet. Wenn wir auf die Schaltfläche „Ja“ klicken, steht dem Benutzer das folgende Textfeld zur Verfügung, in dem er weitere Details in das Formular eingeben kann.
  • if (document.getElementById(‚pupil‘).checked == true) wird verwendet, um ein Element mithilfe der ID aufzurufen, und „disabled“ wird auf „true“ gesetzt, um Elemente zu aktivieren.
  • onclick=“javascript:Degree();“ Dieses Ereignis funktioniert, wenn wir auf „Ja“ klicken und das folgende Textfeld zum Ausfüllen der Informationen verfügbar machen.

Demo zum Aktivieren/Deaktivieren von Formularelementen

  • Speichern Sie die Datei unter dem Namen „enableing_disabling.html“ in Ihrem System.
  • Öffnen Sie einfach die Datei im Browser. Sie sehen das folgende Bild im Browser. Beachten Sie, dass der Browser die HTML-Spezifikation unterstützen muss.

Wenn der Ausführungsprozess erfolgreich abgeschlossen ist, erhalten wir die folgende Ausgabe:

Formularelemente aktivieren/deaktivieren

Aktivieren Sie nun das Kästchen „Ja“ und Sie möchten, dass die Felder unter diesem Kästchen aktiviert sind, wie im folgenden Bildschirm gezeigt:
Formularelemente aktivieren/deaktivieren

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen