Come posso cambiare il colore di <label> quando il suo ingresso è disabilitato?

Question

Mi hanno alcune etichette come:

<label> 
    <input type="checkbox" name="the_name" id="the_name" /> Label text 
    </label> 

che a volte sono disabili

$("#the_name").prop('disabled', true); 

Nessun problema, ma vorrei cambiare etichetta di colore del testo per renderlo più visibile. È possibile utilizzare Jquery e/o CSS?

Answer 1

è possibile aggiungere una regola CSS per l'etichetta selezionando il genitore di vostro input e aggiungendo che, al momento si disattiva il controllo

$("#the_name").prop('disabled', true).parent().css({backgroundColor:'#fcc'}); 

---

Inoltre, credo che l'etichetta è destinata ad essere usa così:

<label for="the_id">Label text</label> 
<input type="checkbox" name="the_name" id="the_id" /> 

dove attributo dell'etichetta for corrisponde alla id del controllo target

nel qual caso è possibile selezionare l'etichetta da esso è for attributo e applicare css, come si vede in forma - qualcosa di simile:

$("#the_id").prop('disabled', true); 
$('label[for=the_id]').css({backgroundColor:'#fcc'}); 

See violino per demo: http://jsfiddle.net/bq52X/

Answer 2

Sì, se si vogliono rendere il testo dell'etichetta di input disabilitato di un colore diverso, quindi è possibile aggiungere una classe css al tag <label>.

$("#the_name").prop('disabled', true).parent('label').addClass('disabled-label'); 

Quindi è possibile controllare lo stile tramite il foglio di stile anziché nel file di script o nel file html.

Considerare di non avvolgere l'input all'interno del tag dell'etichetta sebbene ritenga che ciò dia un maggiore controllo sugli stili.

Answer 3

Una possibilità:

$("#the_name").parent('label').css('color','silver'); 

Answer 4

Questo può essere fatto in CSS, ma solo quando l'etichetta viene dopo il tag input. Per esempio:

HTML:

<input id="someinput" type="text" /><label for="someinput">Type text:</label> 

CSS:

input[disabled] + label { *whatever style you want when input is disabled* } ; 

Answer 5

non ho sentito nessuno opacità:

.css('opacity', '0.5');