Question

我想在禁用与label相关联的input元素时禁用 <label id="spacesPerIndentLabel">Spaces per indent: 4</label> <br> <input id="spacesPerIndent" type="text" disabled>。这是我的代码：

disabled

我无法弄清楚如何禁用标签。我尝试将label + input:disabled { ... }放在标签上，但没有运气，因为label isn't an element that supports disabled。我还想过选择

input

但是这会选择已停用的label而不是+。经过一些进一步的研究后，我发现CSS没有“上一个兄弟”选择器（如void attachHelpfunctionPointer(void (* functionPointer)(int), int test=0); void (* helpFunctionPointer)(int); void attachHelpfunctionPointer(void (* functionPointer)(int), int test) { helpFunctionPointer = functionPointer; //pass the address }是“下一个兄弟”选择器）。

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。

Answer 2

如果您对在输入和标签周围放置包装使用位置相对，并绝对定位标签感到满意，可以试试这种方法：

CSS：

.container {
  position: relative;
  padding-top: 1.1em;
}

.container label {
  position: absolute;
  left: 0;
  top: 0;
}

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

HTML：

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

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

JSFiddle：https://jsfiddle.net/c1d81r8b/3/

基本上这只是将标签放在输入之后，这样它们就可以与兄弟选择器一起定位，但随后将它们放在它之前。容器上的1.1em填充顶部是标签可以放置的空间 - 调整它以匹配您的标签字体大小和那里所需的任何填充/边距。

请注意，如果您的标签文本需要在任何时候换行，这将不合适 - 所以请谨慎使用。

Answer 3

如果您乐意为rgba元素添加额外的属性或类，则可以使用CSS对其进行适当的样式设置。例如

<label>

你的CSS看起来像

<label disabled id="spacesPerIndentLabel">Spaces per indent: 4</label>
<!-- or -->
<label class="disabled" id="spacesPerIndentLabel">Spaces per indent: 4</label>

Answer 4

首先，label的标记与标准不兼容，即它没有for属性。 See this或者至少它应该包裹它的元素。

首先，您的HTML应该类似于以下内容：

<label id="spacesPerIndentLabel" for="spacesPerIndent">Spaces per indent: 4</label>
<br>
<input id="spacesPerIndent" type="text" disabled>

然后使用javascript我们将为每个标签添加类，其元素被禁用，如下所示：

labels = document.getElementsByTagName('label');
    for (i = 0; i < labels.length; i++){
      forId = labels[i].attributes.for.value
      if (document.getElementById(forId).attributes.disabled){
        labels[i].className = 'dis'
      }
    }

结帐this DEMO

当与之关联的项目被禁用时，我可以将<label>灰显吗？

4 个答案: