如何在禁用输入时更改<label>的颜色？</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/

Answer 3

是的，如果您想要将禁用的输入标签文本设为不同的颜色，那么您可以将{css类添加到<label>标记。

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

然后您可以通过样式表而不是脚本文件或html文件来控制样式。

考虑不将输入包装在label标签内，因为我觉得它可以让你更好地控制样式。

Answer 4

我没有听到任何关于不透明度的人：

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

Answer 5

一个选项：

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