Как изменить цвет <label> s, когда его вход отключен?

У меня есть такие ярлыки, как:

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

которые иногда отключены

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

Нет проблем, но я бы хотел изменить цвет текста ярлыка, чтобы сделать его более заметным. Возможно ли использование JQuery и/или CSS?

Ответы

вы можете добавить правило css на метку, выбрав родительский элемент вашего ввода и добавив к нему в то время, когда вы отключите элемент управления

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

Кроме того, я думаю, что ярлык предназначен для использования следующим образом:

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

где атрибут label for соответствует id целевого элемента управления

и в этом случае вы можете выбрать ярлык с помощью атрибута for и применить css по своему усмотрению - что-то вроде этого:

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

Смотрите скрипт для демонстрации: http://jsfiddle.net/bq52X/

Это можно сделать в CSS, но только тогда, когда метка появляется после входного тега. Например:

HTML:

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

CSS

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

Да, если вы хотите, чтобы отключенные входы отображали текст другого цвета, вы можете добавить класс css в тег <label>.

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

Затем вы управляете стилем через таблицу стилей, а не в файле script или html файле.

Подумайте, не обертывая ввод внутри тега метки, хотя, как я чувствую, он дает вам больший контроль над стилями.

Я не слышал про непрозрачность:

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

Один вариант:

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