javascript - 当与其关联的元素被禁用时，我可以将 <label> 变灰吗？

Question

当与其关联的 input 元素被禁用时，我想禁用 label。这是我的代码:

                <!-- TODO: Gray this label out initially. -->
                <label id="spacesPerIndentLabel">Spaces per indent: 4</label>
                <br>
                <input id="spacesPerIndent" type="text" disabled>

我不知道如何禁用标签。我尝试将 disabled 放在标签上，但没有成功，因为 label isn't an element that supports disabled .我也想到了选择

label + input:disabled { ... }

但这会选择禁用的 input 而不是 label。经过进一步研究，我发现 CSS 没有“前一个兄弟”选择器(比如 + 是“下一个兄弟”选择器)。

Answer 1

您可以使用 css flexbox 来定位您的元素。

https://jsfiddle.net/c1d81r8b/4/

HTML:

<div class="container">
  <input id="test1" type="text">
  <label for="test1">Test 1 label</label>
</div>
<br>
<br>
<div class="container">
  <input id="test2" type="text" disabled>
  <label for="test2">Test 2 label</label>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column;
}

.container label {
  order: 1;
}

.container input {
  order: 2;
}

.container input[disabled] + label {
  background: grey;
}

这让您可以使用 CSS 设置元素的显示顺序，并允许您使用兄弟选择器。

参见 https://caniuse.com/#feat=flexbox浏览器支持说明。