Question

我已经尝试过JQuery和JavaScript来更改标签的CSS以使其灰显。但我没有成功。

标签位于复选框旁边，我可以禁用复选框，但不能在旁边标记。

标签创建如下：特别

当有人点击ID为“idRadio”的单选按钮时，我想更改此标签。

Answer 1

您不需要jQuery或Javascript来完成您想要实现的目标。

如果您的<label>标记位于<input type=checkbox>标记之外，则可以使用CSS选择器：

/* gets the label that is immediately after a disabled input type=checkbox */
input[type=checkbox]:disabled+label {
  /* and changes its color to gray */
  color: gray;      
}

＆＃13;

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('button').addEventListener('click', function(e) {
    var cb = document.getElementById('cb');
    cb.disabled = !cb.disabled;
  });
});

＆＃13;

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

＆＃13;

<div>
  <input id='cb' type='checkbox' disabled> <label for='cb'>My checkbox</label>
</div>
<div>
  <button>Toggle disabled</button>
</div>

＆＃13;

<强>更新

根据您的评论，我已经实施了一个Javascript版本来执行您想要的操作，但我根本不推荐它。我只是想在这里帮助你：

＆＃13;

document.addEventListener('DOMContentLoaded', function() {
  var radios = document.getElementsByName('idRadio');
  [].forEach.call(radios, function(radio, i) {
    radio.addEventListener('change', function() {
      var sp = document.getElementById('idSpecial');
      sp.disabled = (this.value === "0");
      sp.parentNode.removeChild(sp.nextSibling);
     
      var span = document.createElement('span');
      if (sp.disabled) span.style.color = 'gray';
      span.textContent = 'Special';
      
      sp.parentNode.insertBefore(span, sp.nextSibling);
    });
  });
});

＆＃13;

<input type="checkbox" id="idSpecial" name="Special">Special
<input type="radio" value="1" name="idRadio" checked>Enable</input>
<input type="radio" value="0" name="idRadio">Disable</input>

＆＃13;

如何使用HTML表单的输入字段禁用标签

1 个答案: