Label Style ändern?

[hawkmaster]

Hallo zusammen,

ich habe auf einer Seite mehrere <select> und Textfelder.
z.b.

  
<label for="warn_sel_Size">Size</label><br />  
<select name="sel_Size" id="warn_sel_Size"  
<option value="x">Not available</option>  
</select>  

Bei bestimmten Siutationen sollen diese Selects und textfelder disabled sein und auch die Schrift im Label soll grau sein.

Ich habe dies per JS so versucht:

  
function disable_element(elm_id) {  
elm = document.getElementById(elm_id);  
elm.disabled = true;  
elm_label = document.getElementById(elm_id);  
elm_label.parentNode.style.color ='#515151';  
}  

Übergeben wird also zum Beispiel:
disable_element('warn_sel_Size');

Es klappt fast. Nur sind die Labels benachbartet Selects nun auch grau obwohl diese garnicht disabled wurden.
Wie könnte ich gezielt nur den dazugehörigen Label ansprechen?

vielen Dank und viele Grüße
hawk

[suit]

Wie könnte ich gezielt nur den dazugehörigen Label ansprechen?

Das for-Attribut stellt einen eindeutigen Bezug her.

[hawkmaster]

Hallo suit,

danke für deine Hilfe,

Das for-Attribut stellt einen eindeutigen Bezug her.

Ich habe es jetzt so abgeändert, dass ich den Labels zusätzlich eine eindeutige Idee gebe.

Nur mal so aus Interesse:
Wie könnte man die verschiedenen "for" ansprechen?
Mit "GetElementByTagName" reicht ja nicht.

vielen Dank und viele Grüße
hawk

[suit]

Ich habe es jetzt so abgeändert, dass ich den Labels zusätzlich eine eindeutige Idee gebe.

Den HTML-Code zu ändern ist selten eine gute Idee.

Wenn, dann aber sinnvoll und nicht aus hilflosigkeit, irgendwelche Attribute hinzufügen.

z.B. <label /><select /> und dann mit previousSibling arbeiten.

Nur mal so aus Interesse:
Wie könnte man die verschiedenen "for" ansprechen?
Mit "GetElementByTagName" reicht ja nicht.

Du holst alle label-Elemente in ein Array und gehst sie mit einer Schleife durch - darin prüfst du, ob sie ein Attribut mit dem Namen "for" enthalten, wenn ja prüfst du, ob der Wert der gewünschten id entspricht.

Geschätzter Aufwand: etwa 10 Zeilen, sauber eingerückt.

Oder du nutzt eine JavaScript-Selektor-Engine dafür - dann kannst du bequem mit dem Attribut-Selektor arbeiten "label[for=meine_wunsch_id]"

[Der Martin]

Hallo,

<label for="warn_sel_Size">Size</label><br />

<select name="sel_Size" id="warn_sel_Size"
<option value="x">Not available</option>
</select>

  

> Bei bestimmten Siutationen sollen diese Selects und textfelder disabled sein und auch die Schrift im Label soll grau sein.  
  
wenn nicht IrgendEin Browser ein Problem damit hätte, wäre es natürlich schlau, das Formularelement (select, input) mit in das label-Element zu stecken, so dass man die beiden Elemente günstig adressieren kann. Wenn allerdings IE(6) auch noch berücksichtigt werden muss, ist die obige Struktur wohl erforderlich[1]. Das br-Element allerdings nicht.  
  

> Übergeben wird also zum Beispiel:  
> disable\_element('warn\_sel\_Size');  
  

> function disable\_element(elm\_id) {  
> elm = document.getElementById(elm\_id);  
> elm.disabled = true;  
  
dann hast du mit elm jetzt eine Referenz auf das label-Element und setzt dessen disabled-Eigenschaft. Ergibt das Sinn?  
  

> elm\_label = document.getElementById(elm\_id);  
  
Dann bestimmst du in elm\_label dieselbe Referenz nochmal, ...  
  

> elm\_label.parentNode.style.color ='#515151';  
> }  
  
... und setzt die Textfarbe seines Elternelements auf schwach grau. Das ist vermutlich das Formular, das die Textfarbe dann an alle seine Kindelemente vererbt.  
  

> Wie könnte ich gezielt nur den dazugehörigen Label ansprechen?  
  
Das tust du bereits - das Label und sein Elternelement.  
  
Ciao,  
 Martin  
  
  
[1] Ich gehe mal davon aus, dass das nicht korrekt geschlossene select-Element nur ein Abschreibfehler ist. Hoch lebe Copy&Paste. (Nicht zu verwechseln mit Smith&Wesson)

-- 
Moskito, ergo summ.  

[Kai345]

[latex]Mae  govannen![/latex]

wenn nicht IrgendEin Browser ein Problem damit hätte, wäre es natürlich schlau, das Formularelement (select, input) mit in das label-Element zu stecken, so dass man die beiden Elemente günstig adressieren kann. Wenn allerdings IE(6) auch noch berücksichtigt werden muss, ist die obige Struktur wohl erforderlich[1].

Nein, auch IE6 kann ein Formularelement in einem Label-Element eingeschlossen problemlos verarbeiten. nur das for-Attribut muß dazu gesetzt sein. Siehe dazu Test

Cü,

Kai

[Der Martin]

Hallo,

auch IE6 kann ein Formularelement in einem Label-Element eingeschlossen problemlos verarbeiten. nur das for-Attribut muß dazu gesetzt sein.

stimmt, da hatte ich mich vergaloppiert. Ich wusste, dass er irgendwas in dem Zusammenhang nicht richtig kapiert - natürlich kann man die Elemente verschachteln, wie es vorgesehen ist, nur braucht der IE trotzdem das for-Attribut, um den Zusammenhang zu begreifen.

Und damit könnte hawk seine HTML-Struktur tatsächlich sinnvoll abändern:

<label for="warn_sel_Size">Size
 <select name="sel_Size" id="warn_sel_Size">
  <option value="x">Not available</option>
 </select>
 </label>

So kann er das Label entweder über getElementsByTagName() suchen, oder ihm auch noch eine ID geben und getElementById() verwenden, und das darin enthaltene Formularelement dann mit children[] adressieren.

So long,
 Martin