Schreibgeschütztes Kontrollkästchen in HTML
Dieser Artikel ist ein kurzer Hack, wie wir ein HTML-Kontrollkästchen zum Steuern einer schreibgeschützten Komponente machen können. Aber lassen Sie uns zuerst eine kurze Einführung in die Checkbox-Steuerung geben.
Überblick über die HTML-Checkbox
Die Standarddarstellung von <input> -Elementen des Typs checkbox ist ein Kästchen, das bei Aktivierung aktiviert (Häkchen markiert) ist, ähnlich wie Sie es auf einem legitimen Regierungspapierformular sehen können.
Das genaue Erscheinungsbild wird durch das vom Browser verwendete Betriebssystem-Setup bestimmt. Zum Beispiel ist es typischerweise quadratisch, könnte aber abgerundete Ecken haben. Außerdem können Sie im Gegensatz zu Optionsfeldern mehr als eine Option in den Kontrollkästchen auswählen.
Syntax:
<input type="checkbox" id="physics" name="physics" checked>
<label for="physics">Physics</label>
<input type="checkbox" id="maths" name="maths">
<label for="maths">Mathematics</label>
<input type="checkbox" id="cs" name="cs">
<label for="cs">Computer Science</label>
Es ist zu beachten, dass der Name des Kontrollkästchens nicht sein Anzeigename ist. Der Anzeigename wird durch das Tag <label> angegeben. Dieser Name wird serverseitig beim Absenden des Formulars verwendet.
Wenn das Formular gesendet wird, erhalten wir nur den Wert von aktivierten Kontrollkästchen. Dies liegt daran, dass der Wert eines deaktivierten oder nicht aktivierten Kontrollkästchens auf der Serverseite nicht empfangen wird.
Schreibgeschütztes Kontrollkästchen in HTML
Angenommen, Sie haben einen Fall, in dem Sie das Kontrollkästchen zwangsweise aktivieren und dem Benutzer nicht erlauben müssen, es zu deaktivieren oder es zu einem schreibgeschützten Feld zu machen. Wir können dies durch eine JavaScript-Funktion erreichen.
<HTML>
<head>
<script>
function makeReadOnly() {
return false;
}
</script>
<body>
<input type="checkbox" id="physics" name="physics" onClick="return makeReadOnly()" checked>
<label for="physics">Physics</label> <br/>
<input type="checkbox" id="maths" name="maths" disabled>
<label for="maths">Mathematics</label><br/>
</body>
</html>
In diesem HTML-Code haben wir zwei Kontrollkästchen erstellt; einer wird schreibgeschützt und der andere deaktiviert. Um ein Kontrollkästchen schreibgeschützt zu machen, geben wir false zurück, wenn der Benutzer darauf klickt.
Dadurch wird der Zustand des Kontrollkästchens unverändert, da es bereits aktiviert ist, sodass es unabhängig von den Klicks des Benutzers aktiviert bleibt.
Wenn das Formular gesendet wird, wird der Wert dieses aktivierten Kontrollkästchens mit den Formulardaten gesendet, während die Daten des deaktivierten Kontrollkästchens nicht gesendet werden. Schauen wir uns die Ausgabe an:
Beachten Sie, dass das deaktivierte Kontrollkästchen ausgegraut ist und der Benutzer es nicht aktivieren oder deaktivieren kann.