Question

我想禁用与复选框关联的标签。代码段如下：

代码：

<label for="label1" class="form-checkbox-left"><input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>Name 1</label>

css： .form-checkbox-left input[type=checkbox]:disabled { color:#ccc; }

以某种方式不起作用。

Please help

Answer 1

您可以选择使用element+element选择器。您需要将输入内容放置在标签之前，

input[type=checkbox]:disabled+label {
  color: #ccc;
}

<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>
<label for="label1" class="form-checkbox-left">Name 1</label>

Answer 2

您可以尝试使用以下方法处理jquery if ($('label1'.hasAttribute('disabled')){ $('[for="label1"]').attr('disabled', 'disabled'); }

在[for =“ label1”]，您可以放置标签的ID（“如果需要”）

Answer 3

我刚刚对Firefox进行了仔细检查，并且将任何样式定义添加到复选框都不会改变其外观的任何方面。看来您不走运，因此必须采取其他方法来隐藏复选框本身（不是使用display: none;，而是使用visibility: hidden;），然后添加辅助CSS来实际自定义其外观

有关如何执行此操作的示例，请参见http://cssdeck.com/labs/css-checkbox-styles
也许可以帮助您得出最适合您的方法。

编辑

如果您尝试为复选框的父标签设置样式，那么您会很走运，因为尽管提出了建议，但到目前为止CSS尚未实现父元素选择器（有关详细信息，请参见https://shauninman.com/archive/2008/05/05/css_qualified_selectors）

编辑2

您可以通过将标签定义移到复选框定义的后面来进行尝试：

<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled><label for="label1" class="form-checkbox-left">Name 1</label>

然后您的CSS应该看起来像这样以方便更改：

input[type="checkbox"][disabled] + label {
  color: #ccc;
  }

这反过来会修改标签的文本。

使用CSS选择器将与复选框关联的禁用标签

3 个答案: