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

Question

<分区>

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

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

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

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

---

已更新

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

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

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