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

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;
}

不知怎的，它不起作用。

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;
  }

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