Ich möchte die CSS ändern für Behinderte Kontrollkästchen in einem Gitter (sie sind zu schwer für die Nutzer zu sehen). Was ist ein einfacher Weg, dies zu tun?
Meine Präferenz in Technologien verwendet (in absteigender Reihenfolge):
CSS
JavaScript
jQuery
Andere
Ive hatte viel Glück mit ein paar JS Bibliotheken die Arbeit zu tun. Zugegeben meine Anforderung war es, die Kisten aus dem Standard-Kontrollkästchen ganz anders aussehen. Die folgende Bibliothek ist sogar 508-konform.
Grundsätzlich müssen Sie für ein Gitter verwendet Onclick-Ereignis auf div, p, oder jedem anderen Elemente befestigen und dann den geprüfte Wert in verborgenem Element mit diesem Feld in einem Raster zugeordnet übertragen. das ist sehr trivial, wenn Javascript verwendet wird - jquery überprüfen auf ein beliebiges Element Onclick Ereignis hinzuzufügen. wenn angeklickt, Sollwert = 1 für verstecktes Element.
Ich würde vorschlagen , dass die Farbe des Hintergrundes (die Veränderung background-colorder Form / fieldset), und sehen Sie, wenn Sie mit einem besseren Kontrast aufwarten kann. (? Nicht wählbar) Wenn Sie nur die Farbe von behinderten ändern möchten Kontrollkästchen können Sie versuchen:
input[disabled] {
...
/* CSS here */
...
}
Aber wenn sie aus einem bestimmten Grund deaktiviert sind, sicherlich brauchen sie nicht prominent sichtbar zu sein? Das Ziel für ihr Sein ausgegraut ist, sicher, um Verwechslungen zu vermeiden zwischen aktiv / aktiviert und deaktiviert / deaktiviert Formularelementen?
input:disabled {}jeden Browser funktioniert für außer-you it-IE erraten. Für IE, ich denke, du wirst einige JS-Bibliothek verwenden.
Halten Sie das Kontrollkästchen aktiviert, aber fügen Sie dann onfocus=this.blur()auf das Kontrollkästchen , damit es nicht angeklickt werden kann.
Oder wenn ASP.net verwenden (wie Sie in Ihrem Kommentar sagen) halten Sie das Kontrollkästchen gesetzt aktiviert und fügen Sie den folgenden auf die Page.Load Veranstaltung:
CheckBox1.Attributes.Add("onclick", "return false;");
Wenn Sie ein Formular mit einer Mischung aus aktiviert und deaktiviert Kontrollkästchen haben, mit Behinderten Kontrollkästchen vermeidet für den Anwender Verwirrung ausgeblendet. Wenn die Absicht, eine Nur-Ansicht-Seite mit Kontrollkästchen angezeigt ist (ex., Die auf einem Kaufbeleg ausgewählte Produktoptionen zeigen), dann Checkbox Eingabeelemente mit Bildern ersetzen machen kann bessere Ergebnisse.
Ersetzen
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
mit
<img src="unchecked.gif">
<img src="checked.gif">
Eigentlich mit einem bisschen CSS3 können Sie eine sehr einfache Lösung Mock-up. Sie müssen immer überlegen, welche Art von Unterstützung, die Sie anbieten möchten. Aber wenn Sie sind in Ordnung mit ihm auf modernen Browsern arbeiten, ist es nur gehen geben.
Hier ist der HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Hier ist die CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
Und hier ist die DEMO http://jsfiddle.net/DyjmM/