✔ Style eines Input Element durch eine Checkbox verändern

R

ReemE

Mitglied
Hallo an Alle!

Code: 
<input value="" class="favdescription" name="1" /><br />
<input type="checkbox" name="2" value="header" onclick="" />Change input style

Ich tüftel an einer function, die, wenn durch einen Check der Checkbox ausgelöst, den style des input Feldes darüber verändert. Es wäre sogar besser, wenn nicht der eigentliche Style verändert werden würde, sondern das Input Feld so gestaltet werden würde, dass es nach dem checken der Checkbox nicht mehr editierbar erscheint. (in Windows wird so ein Feld dann immer grau..)

Wisst ihr wie man so etwas realisieren könnte?
Danke schön!
ReemE
 
HTML: 
<input type="text" value="" class="favdescription" name="1" /><br />
 <input type="checkbox" name="2" value="header" onChange="
 	if (document.getElementsByName('1')[0].disabled == true) {
 		document.getElementsByName('1')[0].disabled = false;
 	} else { 
 		document.getElementsByName('1')[0].disabled = true; 
 	}
 " />
Problem dabei: Beim IE6 verfärbt sich das Feld nicht grau, man kann nur nichts mehr reinschreiben.
 
HTML: 
<script language="JavaScript">
function disable($name){	
	if (document.getElementsByName($name)[0].disabled == true) {
 		document.getElementsByName($name)[0].disabled = false;
 	} else { 
 		document.getElementsByName($name)[0].disabled = true; 
 	}
}
</script>

<input name="1" />
<input type="checkbox" name="2" value="header" onchange="javascript:disable(1);" />


warum geht das nicht?
 
Weil, das JavaScritp ist und kein PHP? In JavaScript leitet man Variablen nicht mit dem Dollarzeichen ( $ ) ein. Das Dollarzeichen ist in Variablen sogar verboten, wie jedes Sonderzeichen außer dem Unterstrich ( _ ). Außerdem braucht es in einem onchange-Event kein "javascript:" weil onchange von Haus aus ein JavaScritp-Event ist.
Folgendes Funktioniert garantiert:
HTML: 
<script type="text/javascript">
   function disable(name){
   	if (document.getElementsByName(name)[0].disabled == true) {
   		document.getElementsByName(name)[0].disabled = false;
   	} else {
   		document.getElementsByName$name)[0].disabled = true;
   	}
   }
   </script>
   
   	<input name="1" />
   
   	<input type="checkbox" name="2" value="header" onchange="disable(1);" />

Edit:
Du tätest gut daran, dich mit W3C-Standarts anzfreunden: <script language="JavaScript"> ist nämlich "depreciated" (zu Deutsch: "unerwünscht, abgeschrieben, erledigt").
 
Zuletzt bearbeitet:
irgendwie ist da der Wurm drin.. Hab auch mal ne kleine Fehleranalyse gemacht..

HTML: 
<script type="text/javascript">
   function disable(name){
   	alert (name);   	
   	if (document.getElementsByName(name)[0].disabled == true) {
   		alert (" false");
   		document.getElementsByName(name)[0].disabled = false;
   	} 
 	else {
 		alert ("true");
   		document.getElementsByName(name)[0].disabled = true;
   	}
   }
   
  
</script>


jedes Mal wenn ich die Checkbox anklicke, dann kommt [ObjectHTMLInputElement] anstatt der Variablen.. Der False oder true alert kommt nie .. Demnach müsste der Fehler irgendwo in der Variablen Übernahme liegen?
 
Also am Script liegt es mit Sicherheit nicht, das funktioniert bei mir Perfekt - sowohl im Feuerfuchs als auch im WinzigWeich Endecker. Mir ist allerdeings aufgefallen, dass anscheindend der Firefox anders auf den onchange-Event reagiert, als der Explorer: Führt die funktion nämlich erst dann aus, wenn man (durch klicken auf ein anders Element) die Funktion verlässt, während der Firefox wirlich "onchange" on change ausführt. Du benutzt als besser onclick. Ansonsten kann ich dir nur meinen Test-Code geben und dir versichern, dass er geht:
HTML: 
<html><head><title>Void</title>
  
  </head><body>
  
  <script type="text/javascript"><!--
  	function disable(name){
  		alert (name);	 
  		if (document.getElementsByName(name)[0].disabled == true) {
  			alert (" false");
  			document.getElementsByName(name)[0].disabled = false;
  		}
  		else {
  			alert ("true");
  			document.getElementsByName(name)[0].disabled = true;
  		}
  	}
  //--></script>
     
  	   <input name="1" /><br />
  	
  	Mit onchange:<input type="checkbox" name="2" value="header" onChange="disable('1');" /><br>
  	Mit onclick:<input type="checkbox" name="2" value="header" onClick="disable('1');" />
     
  </body></html>
 
ich danke dir für deine Mühe .. ich habe den Fehler nun gefunden ...
ich hatte disable(1); anstatt disable('1');


Danke
 
Ne das war er nicht, funktioniert nämlich bei mir auch ohne die Anführungszeichen (IE wie FF).

Hab sie nur zur Sicherheit hingemacht, damit du sie nicht vergisst, wenn es sich mal um keinen Int als Parameter sondern eine Zeichenkette handelt. Kann natürlich sein, dass du's vorher schon mit einem String ohne '' getestett hattest und der Fehlschlag daran lag, dann war's doch das Fehler... :rolleyes:
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück