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

【问题标题】：How can I change a <label>’s color when its input is disabled?禁用输入时如何更改 <label> 的颜色？
【发布时间】：2011-11-11 22:22:47
【问题描述】：

我有一些标签，例如：

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

有时会被禁用

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

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

【问题讨论】：

标签： jquery css

【解决方案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* } ;

【讨论】：

【解决方案2】：

您可以通过选择输入的父级并在禁用控件时添加到该标签来向标签添加 css 规则

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

另外，我认为 label 应该这样使用：

<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/

【讨论】：

在<label> 中包含<input> 很好（参见dev.w3.org/html5/spec-author-view/…），但您也希望在其中包含for 属性。
@PaulD.Waite：抱歉，这是不正确的。在label 标签内使用input 意味着您不需要 需要指定for 属性，这实际上是指定可点击标签的首选方式。详细解释见this post。
每天都是上学日。我不知道你可以放弃for 属性。
@aaamons：我同意the spec 不需要<label> 上的for 属性，如果它的<input> 在其中。我认为有些屏幕阅读器没有将嵌套的<input> 与他们的<label> 关联起来，因此我建议也包括for。不过我没有这方面的来源，所以我不知道这是否仍然是个问题。
在标签内输入是我发现的唯一方法，以便让标签的文本可点击，而不仅仅是复选框输入。随意发布任何其他可以执行此操作的代码：“能够单击标签文本以将复选框从选中/取消选中更改”没有 JS/CSS

【解决方案3】：

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

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

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

考虑不要将输入包装在标签标签内，尽管我觉得它可以让您更好地控制样式。

【讨论】：

【解决方案4】：

我没有听到任何人谈论不透明度：

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

【讨论】：

【解决方案5】：

一个选项：

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

【讨论】：