Come impostare CSS per le caselle di controllo disabilitate?

Question

Vorrei cambiare il CSS per le caselle di controllo disabilitate in una griglia (sono troppo difficili da vedere per gli utenti). Qual è un modo semplice per farlo?

Le mie preferenze nelle tecnologie utilizzate (in ordine decrescente):
CSS

JavaScript jQuery
Altro

Answer 1

Suggerirei di cambiare il colore dello sfondo (il background-color del form / fieldset), e vedere se riesci a trovare un contrasto migliore. Se vuoi solo cambiare il colore delle caselle di controllo disabilitate (non selezionabili?) Puoi provare:

input[disabled] {
...
/* CSS here */
...
}

Ma se sono disabilitati per un motivo, sicuramente non devono essere ben visibili? L'obiettivo del loro essere in grigio è sicuramente quello di evitare la confusione tra elementi di forma attivi / abilitati e inattivi / disabilitati?

Answer 2

Mantieni la casella abilitata, quindi aggiungi onfocus = this.blur () alla casella in modo che non possa essere cliccata.

O se usi ASP.net (come dici nel tuo commento) mantieni la casella di controllo abilitata e aggiungi quanto segue all'evento Page.Load:

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

Answer 3

Ho avuto buona fortuna con alcune librerie JS per fare il lavoro. Concesso il mio requisito era di rendere le caselle molto diverse dalla casella di controllo standard. La seguente libreria è persino conforme a 508.

Controlli di forma con stile

Answer 4

input: disabled {} funziona per tutti i browser tranne - avete indovinato - IE. Per IE, suppongo che dovrete usare alcune librerie JS.

Answer 5

in pratica, è necessario collegare l'evento onclick su div, p o qualsiasi altro elemento utilizzato per una griglia e quindi trasferire il valore verificato nell'elemento nascosto associato a quel campo in una griglia. il che è molto banale, se viene utilizzato javascript - controlla jquery per aggiungere l'evento onclick su qualsiasi elemento. se si fa clic, impostare value = 1 per l'elemento nascosto.

Answer 6

In realtà con un po 'di CSS3 puoi prendere in giro una soluzione molto semplicistica. Dovrai sempre considerare il tipo di supporto che desideri offrire. Ma se stai bene lavorando con i browser moderni, provaci.

Ecco l'HTML

<label>
    <input type="checkbox" name="test" />
    <span>I accept terms and cons</span><br><br>
    <button>Great!</button>
</label>

Ecco il CSS

button { display: none}
:checked ~ button {
    font-style: italic;
    color: green;  
    display: inherit;
}

Ed ecco la DEMO http://jsfiddle.net/DyjmM/

Answer 7

Se si dispone di un modulo con una combinazione di caselle di controllo abilitate e disabilitate, la disattivazione delle caselle di controllo evita la confusione per l'utente. Se l'intenzione è quella di visualizzare una pagina di sola visualizzazione con caselle di controllo (ad es. Per mostrare le opzioni del prodotto selezionate in una ricevuta di acquisto), la sostituzione degli elementi di input della casella di controllo con le immagini può fornire risultati migliori.

Sostituire

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

con

<img src="unchecked.gif">
<img src="checked.gif">