• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Mit Radiobutton auswählen und Selectbox aktivieren/deaktivieren

F

Fremder.49

New member
Hallo, ich möchte mit Radiobutton eine Wochentag-Auswahl treffen und nur am Mittwoch soll eine gegraute Auswahlbox aktiv für eine zusätzliche Auswahl sein.
Beim anklicken der anderen Wochentage soll die Box wieder de-aktiv werden.
Das klappt soweit auch, jedoch wird die Auswahlbox nur beim anklicken von Montag wieder de-aktiv.
Hier hätte ich gerne Hilfe, da ich Javascript nich beherrsche.
Hier mein Code-Schnipsel:
PHP: 
 <script>
    function weiter() {	  
    var e = document.getElementById('auswahl');
    if (document.getElementById('ja').checked  == true) {
      e.removeAttribute('disabled');
    }
    if (document.getElementById('nein').checked == true) {
      e.setAttribute('disabled','disabled');
    }
  }
    </script>
HTML: 
    Montag<input type="radio" name="D1" id="nein" onclick="weiter();">
    Dienstag<input type="radio" name="D1" id="nein" onclick="weiter();">
    Mittwoch<input type="radio"  name="D1" id="ja" onclick="weiter();">
    Donnerstag<input type="radio" name="D1" id="nein" onclick="weiter();">    
    Freitag<input type="radio" name="D1" id="nein" onclick="weiter();">
    Sonnabend<input type="radio" name="D1" id="nein" onclick="weiter();">

 Auswahl-Veranstaltung:<font face="Calibri"><font face="Verdana" size="1">  wird nur am Mittwoch angezeigt</font></p>
      
   <select id="auswahl" disabled name="D3"size="6">
    <option></option>
    <option>Turnen</option>
    <option>Joggen</option>
    <option>Skaten</option>
    <option>Wandern</option>
    </select>

Vielleicht kann ich hier Hilfestellung bekommen, danke im voraus.
 
Zuletzt bearbeitet von einem Moderator:
Hallo Fremder :)
Id's sollen immer eindeutig sein
über die id kannst du deine Radiobuttens besser erkennen im Script und im Css


HTML: 
<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		
<style type="text/css">
form{width:200px;}
form label{display:inline-block;width:100%;}
form label input{float:right;}
form label:hover {background-color:#ccc;}
</style>
	</head>
	<body>
<form id="myDay">

<fieldset>
    <label>Montag <input type="radio" name="D1" id="mo" ></label>
    <label>Dienstag <input type="radio" name="D1" id="di"></label>
    <label>Mittwoch <input type="radio"  name="D1" id="mi" ></label>
    <label>Donnerstag <input type="radio" name="D1" id="do" >  </label>  
    <label>Freitag <input type="radio" name="D1" id="fr" ></label>
    <label>Sonnabend <input type="radio" name="D1" id="sa" ></label>
</fieldset>
 Auswahl-Veranstaltung:<font face="Calibri"><font face="Verdana" size="1">  wird nur am Mittwoch angezeigt</font></p>
      
 <select id="auswahl"  disabled   name="D3"  size="6">
    <option></option>
    <option>Turnen</option>
    <option>Joggen</option>
    <option>Skaten</option>
    <option>Wandern</option>
    </select>
</form>

<script> 

function start(){
var md = document.querySelectorAll('fieldset input');
for(var i = 0 ; i < md.length;i++) { md[i].addEventListener('change',weiter,false);}
}
function weiter(e) 
{  
  
switch(e.target.id)
{
         // prüfen ob Radiobutton der Mittwoch ist wenn ja dann select enable
	case 'mi': document.getElementById('auswahl').disabled=false;  break;
	default : document.getElementById('auswahl').disabled=true;
}   
} 
///////////////////////////////////////
start();  //initialisieren Listener zuweisen ect.
//////////////////////////////////////
</script>
		
	</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
andreax schrieb:
über die id kannst du deine Radiobuttens besser erkennen im Script und im Css
HTML: 
<fieldset>
    <label>Montag <input type="radio" name="D1" id="mo" ></label>
    <label>Dienstag <input type="radio" name="D1" id="di"></label>
    <label>Mittwoch <input type="radio"  name="D1" id="mi" ></label>
    <label>Donnerstag <input type="radio" name="D1" id="do" >  </label>  
    <label>Freitag <input type="radio" name="D1" id="fr" ></label>
    <label>Sonnabend <input type="radio" name="D1" id="sa" ></label>
</fieldset>
Zum Vergrößern anklicken....
das finde ich jetzt aber eine völlig unnötige verwendung von ids. ich stimme zwar nicht generell mit der oft geäußerten aussage "Don’t use ID (selectors)" überein, aber hier sind die ids einfach kein bisschen nötig.
warum nicht z.b. ein data-atrribute? <input type="radio" name="D1" data-mittwoch="true"> und dann if(e.target.hasAttribute('data-mittwoch')){

Dieses Konstrukt
Code: 
function start(){
var md = document.querySelectorAll('fieldset input');
for(var i = 0 ; i < md.length;i++) { md[i].addEventListener('change',weiter,false);}
}
function weiter(e) 
{  
  //...
} 
///////////////////////////////////////
start();  //initialisieren Listener zuweisen ect.
//////////////////////////////////////
Zum Vergrößern anklicken....
ist ziemlich seltsam bzw. unnötig. wieso extra eine eigene Funktion für die 2 zeilen in start?

PS: <font> ist deprecated und soll nicht mehr verwendet werden.
 
wieso extra eine Fuktion für die 2 Zeilen??
Du sollst den Tag nicht ohne kkapsner loben .. wegen global variables :).

@ id vs data-attribute
ich seh da kein unterschied in der Verwendung von data-attributes und id's nur das data-attributes erst ab html5 gibt
und ja in diesem Fall könnte man auch gleich den TextContent zum Vergleich heranziehen. dann sparst du beides
 
andreax schrieb:
Du sollst den Tag nicht ohne kkapsner loben .. wegen global variables
Zum Vergrößern anklicken....
dann mach lieber sowas:
Code: 
(function(window){
	"use strict";
function weiter(e) 
{  
  
switch(e.target.id)
{
         // prüfen ob Radiobutton der Mittwoch ist wenn ja dann select enable
	case 'mi': document.getElementById('auswahl').disabled=false;  break;
	default : document.getElementById('auswahl').disabled=true;
}   
}

	var md = document.querySelectorAll('fieldset input');
	for(var i = 0 ; i < md.length;i++) {
		md[i].addEventListener('change',weiter,false);
	}
})(window);

andreax schrieb:
ich seh da kein unterschied in der Verwendung von data-attributes
Zum Vergrößern anklicken....
bei data-attributes geb ich dir recht - genauso könntest du natürlich nur eine id setzen. ich meine nur dass die ganzen anderen ids unnötig sind.

andreax schrieb:
und ja in diesem Fall könnte man auch gleich den TextContent zum Vergleich heranziehen.
Zum Vergrößern anklicken....
ja zum beispiel
 
ja zum Beispiel so
Code: 
function weiter(e) 
{  
// prüfen ob Radiobutton Label der Mittwoch ist wenn ja dann select anable  

var prf = e.target.parentElement.textContent;

switch(prf.trim())
{ 
	case 'Mittwoch': document.getElementById('auswahl').disabled=false;break;
	default : document.getElementById('auswahl').disabled=true;
}   
}

Das sparsame Verwenden von id's ist nur für Css von Beteutung.
Und da auch nur für jene die keine Ahnung von der Gewichtung haben die den Vorrang in der Cascade regelt

Höchste Priorität haben inline - styles
noch vor der !important Regel wegen der mir auch bootstrap auf die nerven geht weil es zu regen Gebrauch davon macht und man bei Änderungen genötigt wird inline-style zu verwenden.
#id = Gewichtung 100
.Class = Gewichtung 10
tag = Gewichtung 1
 
Hallo Andreax,
danke für die Hilfe bei meinem Problem.Klappt alles wunderbar, hätte ich nicht hinbekommen. Habe eine Menge gelernt (Eindeutigkeit).
(wenn auch noch nicht genug)
Ich vergebe mind. 4 Sterne. Danke !!!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben