如何在禁用输入时更改<label>的颜色？

Question

我有一些标签,如:

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

有时被禁用

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

没问题,但我想更改标签文字颜色,使其更加明显.是否可以使用Jquery和/或CSS？

Answer 1

这可以在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* } ;

Answer 2

您可以通过选择输入的父级并在禁用控件时添加到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" />

标签的for属性与id目标控件的属性匹配

在这种情况下,您可以通过它的for属性选择标签并根据需要应用css - 如下所示:

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

请参阅演示小提琴:http://jsfiddle.net/bq52X/