Как изменить цвет <label> s, когда его вход отключен?
У меня есть такие ярлыки, как:
<label>
<input type="checkbox" name="the_name" id="the_name" /> Label text
</label>
которые иногда отключены
$("#the_name").prop('disabled', true);
Нет проблем, но я бы хотел изменить цвет текста ярлыка, чтобы сделать его более заметным. Возможно ли использование JQuery и/или CSS?
Ответы
Ответ 1
вы можете добавить правило 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/
Ответ 2
Это можно сделать в 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* } ;
Ответ 3
Да, если вы хотите, чтобы отключенные входы отображали текст другого цвета, вы можете добавить класс css в тег <label>
.
$("#the_name").prop('disabled', true).parent('label').addClass('disabled-label');
Затем вы управляете стилем через таблицу стилей, а не в файле script или html файле.
Подумайте, не обертывая ввод внутри тега метки, хотя, как я чувствую, он дает вам больший контроль над стилями.
Ответ 4
Я не слышал про непрозрачность:
.css('opacity', '0.5');
Ответ 5
Один вариант:
$("#the_name").parent('label').css('color','silver');