JavaScript Form-Elemente per Checkbox enablen

Blackbenji · 19. Dezember 2011

Hallo,

vorweg: ich habe kein Ahnung von JavaScript

Folgende Idee:
Für einen Blogeintrag gibt es die Option das aktuelle Datum zu nutzen, oder selber ein Datum zu setzen.

Per default sollen also die Felder Tag, Monat, Jahr ausgegraut sein. Erst per Checkbox sollen diese aktiv werden.

Das Formular würde demnach wie folgt aussehen:

PHP:

<input type='checkbox' id='klickding'>
<select id='tag' disabled="disabled">
    <option>01</option>
    <option>02</option>
    <option>03</option>
</select>
<select id='monat' disabled="disabled">
    <option>Januar</option>
    <option>Februar</option>
    <option>März</option>
</select>
<select id='jahr' disabled="disabled">
    <option>2012</option>
    <option>2011</option>
    <option>2010</option>
</select>

jetzt fehlt mir dafür allerdings der JavaScript Code...

könnte mir damit vielleicht jemand behilflich sein? Gerne auch als Erklärung, damit ich es verstehe!

Danke!

Lawnmower · 19. Dezember 2011

Code:

<script>

  function enableFormElements()
  {
    //Prüfen ob die Checkbox ausgewählt wurde
    if (document.getElementById('klickding').checked == true)
    {
      //Checkbox ausgewählt, Select Elemente aktivieren
      document.getElementById('tag').disabled = false;
      document.getElementById('monat').disabled = false;
      document.getElementById('jahr').disabled = false;
    }
    else
    {
      //Checkbox abgewählt, Select Elemente deaktivieren
      document.getElementById('tag').disabled = true;
      document.getElementById('monat').disabled = true;
      document.getElementById('jahr').disabled = true;
    }
  }
  
</script>

bei deiner Checkbox hängst Du noch

Code:

onclick="enableFormElements()"

dazu.

Könnte man jetzt noch optimieren wenn man die Select Elemente mit einer CSS Klasse gruppieren und so ansprechen würde aber bei 3 Form Elementen gehts gerade auch noch so.

Blackbenji · 19. Dezember 2011

vielen dank! funktioniert auf anhieb. besser kann ein montag nicht starten! :-)

Liebe Grüße,
Blackbenji

Lawnmower · 19. Dezember 2011

ausser man gewinnt im Lotto oder findet 1 Mio Euro auf der Strasse

der-graph · 19. Dezember 2011

Hi,

also, das funktioniert folgendermaßen:
Zuerst brauchst du eien Funktion, die registriert, dass du auf den Checkbutton geklickt hast. Das funktioniert durch die Anweisung "onclick". Also die Zeile so abändern:

Code:

<input type='checkbox' id='klickding'  onclick="switchDatum();">

Das heißt nun: Wenn die Checkbox geklickt wird, dann ruf die Funktion switchDatum() auf.
Die müssen wir nun aber auch noch schreiben.
Das passiert im <head>-Bereich der HTML-Seite. DOrt sagen wir nun was gemacht werden soll:

Code:

<head>
   <script type="text/javascript">
		function switchDatum()
		{
			if (document.getElementById('tag').disabled)
			{
				document.getElementById('tag').disabled=false;
				document.getElementById('monat').disabled=false;
				document.getElementById('jahr').disabled=false;
			} else {
				document.getElementById('tag').disabled="disabled";
				document.getElementById('monat').disabled="disabled";
				document.getElementById('jahr').disabled="disabled";
			}
		}
	</script>
   </head>

In der Funktion wird nun auf deine definierten IDs Zugegriffen (tag, monat, jahr). Die Eigenschaft disabled wird dabei auf "false" gesetzt und damit deaktiviert, also sichtbar geschaltet. Damit die Boxen wieder inaktiv werden sobald die Checkbox wieder deaktiviert wird, wird zunächst immer mit der if-Anweisung geprüft, ob eine Box gerade inaktiv ist, und dann entweder aktiv oder inaktiv geschaltet. Falls du das nicht möchtest, kannst du die if-Anweisung auch einfach entfernen. Alternativ kannst du dort natürlich auch den Zustand der checkbox abfragen und nicht der Datums-Auswahllisten

EDIT: Kurz noch Kaffee geholt und zack - viiiiel zu spät. Diese verdammte CB-Community - sorry

Blackbenji · 19. Dezember 2011

@der-graph: auch dir vielen dank für die erklärung! wunderbar!

mercsen · 19. Dezember 2011

Nur noch ein kleiner Tipp zum Thema Usability:

Warum umständlich über eine Checkbox lösen?
Das Feld disbaled, sobad man aber drauf klickt enablen und checkbox haken setzen. Zum dekativieren kann man dann den hacken rausnehmen, spart dem user aber ein Klick

Suche

JavaScript Form-Elemente per Checkbox enablen

Blackbenji

Lieutenant

Lawnmower

Maître de cuisine Pro

Blackbenji

Lieutenant

Lawnmower

Maître de cuisine Pro

der-graph

Ensign

Blackbenji

Lieutenant

mercsen

Lt. Commander

Ähnliche Themen