Daniel Lahmann: Deaktivierte Felder grau hinterlegen

Hallo!

Ich habe folgendes Formular entworfen (vereinfachte Darstellung!):

www.htw-dresden.de/~s51107/input.html

Wenn man jetzt die Checkbox xa deaktiviert und die Checkbox xb aktiviert kann man in die Felder a bis g nichts mehr schreiben (was mittels JavaScript erreicht und auch gewollt ist). Das Problem ist bloß, dass die Felder nicht grau hinterlegt werden, was jedoch für eine bessere Optik schöner wäre. Wie kann ich das realisieren? Hier das kurze Stück Quellcode, dass die Deaktivierung der Felder a bis g realisiert:

<INPUT TYPE="CHECKBOX" NAME="ca" VALUE="ON" checked
onpropertychange="
a.setAttribute('disabled', !getAttribute('checked')),
b.setAttribute('disabled', !getAttribute('checked')),
c.setAttribute('disabled', !getAttribute('checked')),
d.setAttribute('disabled', !getAttribute('checked')),
e.setAttribute('disabled', !getAttribute('checked')),
f.setAttribute('disabled', !getAttribute('checked')),
g.setAttribute('disabled', !getAttribute('checked'))">xa<BR>

  1. hi,

    Das Problem ist bloß, dass die Felder nicht grau hinterlegt werden, was jedoch für eine bessere Optik schöner wäre.

    disabled ändert m.W. per default nichts an der optik, readonly aber schon.
    readonly ist aber nicht browserübergreifend kompatibel.

    Wie kann ich das realisieren?

    in deinem browser, der attributselektoren versteht, vermutlich recht einfach - und im IE damit mal wieder nicht so einfach.

    ändere doch zusätzlich zum setzen des disabled-attributes auch noch die gewünschten CSS-eigenschaften.

    btw:

    a.setAttribute('disabled', !getAttribute('checked')),

    die referenz auf das formularelement mit dem namen a hast du dir hoffentlich vorher besorgt und in dem javascript-objekt a abgelegt - oder verlässt du dich hier nur auf die gutmütigkeit eines gewissen browsers ...?

    gruß,
    wahsaga

    --
    "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
    1. Hallo, Wahsaga!

      ändere doch zusätzlich zum setzen des disabled-attributes auch noch die gewünschten CSS-eigenschaften.

      ..womit wir genau bei meiner eigentlichen Frage wären. Wo/wie muß ich die CSS-Anweisung einfügen?

      Gruß,
      Daniel

      1. hi,

        ..womit wir genau bei meiner eigentlichen Frage wären. Wo/wie muß ich die CSS-Anweisung einfügen?

        beschäftige dich mit http://de.selfhtml.org/javascript/objekte/style.htm - oder einfacher: mach's, wie Siechfred vorschlug, über das auswechseln der klasse, objekt.className = "andere_klasse".

        gruß,
        wahsaga

        --
        "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
  2. Hallo Daniel.

    Wenn man jetzt die Checkbox xa deaktiviert und die Checkbox xb aktiviert kann man in die Felder a bis g nichts mehr schreiben (was mittels JavaScript erreicht und auch gewollt ist). Das Problem ist bloß, dass die Felder nicht grau hinterlegt werden, was jedoch für eine bessere Optik schöner wäre.

    Dann setze das Eingabefeld nicht nur inaktiv sondern ändere zugleich auch sein Aussehen mittels Javascript, z.B. durch Zuweisen einer anderen CSS-Klasse.

    Freundschaft!
    Siechfred

    --
    Nichts ist schwerer einzureißen als die Mauer in den Köpfen.