Button für IE disablen, CSS-Schriftfarbe soll aber bleiben

[Roberto Cozzetto]

Hallo zusammen

Ich habe folgendes Problem: ich habe meinen Buttons mit CSS zwei verschiedene Styles zugewiesen (aktiver Button mit blauem Hintergrund und weisser Schrift, deaktivierter Button mit grauem Hintergrund und weisser Schrift).

Wenn ich nun mittels HTML-Befehl "disabled" den deaktivierten Button effektiv deaktiviere, wird im IE die Schriftfarbe automatisch auch grau (offensichtlich eine IE-Eigenschaft).

Gibt es nun eine andere Möglichkeit, den Button zu deaktivieren, ohne dass die Schriftfarbe im IE grau wird? (wäre JavaScript eine Lösung?)

Danke für die Tipps.

[Sven Rautenberg]

Moin!

Ich habe folgendes Problem: ich habe meinen Buttons mit CSS zwei verschiedene Styles zugewiesen (aktiver Button mit blauem Hintergrund und weisser Schrift, deaktivierter Button mit grauem Hintergrund und weisser Schrift).

Wie sprichst du denn den deaktivierten Button genau an mit CSS?

Wenn ich nun mittels HTML-Befehl "disabled" den deaktivierten Button effektiv deaktiviere, wird im IE die Schriftfarbe automatisch auch grau (offensichtlich eine IE-Eigenschaft).

Es gibt gewisse Dinge bei Formularelementen, die kann man (unterschiedlich je Browser) einfach nicht beeinflussen, auch wenn man sich auf den Kopf stellt.

Gibt es nun eine andere Möglichkeit, den Button zu deaktivieren, ohne dass die Schriftfarbe im IE grau wird? (wäre JavaScript eine Lösung?)

Frage: Soll der Button nur deaktiviert aussehen, oder soll seine Funktion deaktiviert _sein_ (was ja auch hinsichtlich der Übermittlung an das verarbeitende Skript einen Unterschied macht, da deaktivierte Formularelemente erst gar nicht gesendet werden).

- Sven Rautenberg

[Roberto Cozzetto]

Hy

Vorest danke für deine rasche Antwort.

Den deaktivierten Button spreche ich mit einer class an, also class="btn btnDisabled"; diese ist dann im CSS definiert.

Es wäre natürlich vorteilhaft, wenn ich mit dem Button auch keine Funktion auslösen kann. Nehmen wir an, ich habe einen "Speichern"-Button, der aber noch deaktiviert ist (und zB erst nach Eingabe aller Formfelder aktiviert wird) möchte ich natürlich nicht, dass die Speichern-Funktion trotzdem ausgeführt wird, obwohl der Button eigentlich als "deaktiviert" dargestellt wird.

Gruss
Roberto

[wahsaga]

hi,

Den deaktivierten Button spreche ich mit einer class an, also class="btn btnDisabled"; diese ist dann im CSS definiert.

Das beeindruckt den Internet Explorer aber wenig - wenn du einem Formularelement die Eigenschaft disabled verpasst, hat er dafür seine eigenen Formatierungsregeln, die er mit höherer Spezifität anwendet, als deine sonstigen Angaben im CSS.
(Wenn(!) der IE den Attribut-Selektor verstehen würde, könnte man damit evtl. etwas machen - tut er aber nicht, und somit scheint dieses Problem nicht lösbar, was diverse im Archiv zu findende Threads belegen.)

Es wäre natürlich vorteilhaft, wenn ich mit dem Button auch keine Funktion auslösen kann.

Das dürfte auch der Fall sein, wenn du ihn wirklich disabled hast.

Nehmen wir an, ich habe einen "Speichern"-Button, der aber noch deaktiviert ist (und zB erst nach Eingabe aller Formfelder aktiviert wird) möchte ich natürlich nicht, dass die Speichern-Funktion trotzdem ausgeführt wird, obwohl der Button eigentlich als "deaktiviert" dargestellt wird.

Wenn du auf das Ausfüllen/Aktivieren anderer Formularfelder "warten" willst, brauchst du sowieso Javascript, um den Button dann beizeiten "freizuschalten".
Dann könntest du aber auch auf das "echte" disable-n verzichten - damit könntest du ihn dann wieder per CSS so formatieren, wie gewünscht.
Das "nicht funktionieren" könntest du dann per Javascript simulieren: du rufst onClick auf dem Button eine Prüffunktion auf, die entscheidet, ob der Button klickbar sein soll ("klickbar" ist er ohne disabled zwar immer, aber ob darauf hin eine Reaktion [Abschicken des Formulars] erfolgt, könntest du beeinflussen).
Dies muss nicht unbedingt per onClick auf dem Button geschehen, auch onSubmit im Formular könnte das erledigen. Im dortigen Beispiel siehst du, wie soetwas funktioniert.

Dass der Button sich _optisch_ als klickbar oder nicht klickbar präsentiert, könntest du bewerkstelligen, in dem du ihm per Javascript eine andere Klasse verpasst (oder seine style-Eigenschaften sonstwie abänderst). Damit dies automatisch passiert, sobald alle erforderlichen Eingaben gemacht wurden, müsste auf den einzelnen Formularfeldern mittels Eventhandlern wie onChange (oder onClick bei Checkboxen/Radiobuttons) eine Überprüfung stattfinden.

gruß,
wahsaga