Wie für Behinderte Kontrollkästchen CSS gesetzt?

StackOverflow https://stackoverflow.com/questions/1206960

  •  05-07-2019
  •  | 
  •  

Frage

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 eine einfache Möglichkeit, dies zu tun?

Meine Präferenz in Technologien verwendet (in absteigender Reihenfolge):
CSS
JavaScript
jQuery
Andere

War es hilfreich?

Lösung

Ich würde vorschlagen, dass die Farbe des Hintergrundes (die background-color der Form / fieldset) zu ändern, 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?

Andere Tipps

Halten Sie das Kontrollkästchen aktiviert, aber dann onfocus=this.blur() die Checkbox hinzufügen, damit sie nicht angeklickt werden können.

Oder wenn ASP.net verwenden (wie Sie in Ihrem Kommentar sagen) halten Sie das Kontrollkästchen gesetzt aktiviert und fügen Sie folgendes zu dem Page.Load Ereignis: 

CheckBox1.Attributes.Add("onclick", "return false;");

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.

Styled Form Controls

input:disabled {} funktioniert mit jedem Browser außer-you it-IE erraten. Für IE, ich denke, du wirst einige JS-Bibliothek verwenden.

Grundsätzlich müssen Sie Onclick-Ereignis auf div, p, oder jedem anderen Elemente für ein Gitter verwendet 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.

Eigentlich mit etwas CSS3 kann man 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/

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 ist es, eine Nur-Ansicht-Seite mit Kontrollkästchen angezeigt werden (ex., Die auf einem Kaufbeleg ausgewählte Produktoptionen zeigen), dann Checkbox Eingabeelemente mit Bildern ersetzen kann bessere Ergebnisse machen.

Ersetzen 

<input type="checkbox" disabled>
<input type="checkbox" disabled checked>

mit 

<img src="unchecked.gif">
<img src="checked.gif">
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top