javascript - 根据复选框选中状态启用或禁用目标元素

Question

我基本上是 JavaScript 新手，我已经尝试解决我的这个问题很长一段时间了。所以，我正在做 JS 学校项目，我需要在复选框和文本表单之间建立联系。如果未选中复选框，则应禁用文本表单，反之亦然。这是我写的一段代码:

function cbtf() {
    if (document.getElementById('checkbox').checked==false) {
        document.getElementById('textform').disabled=true;
    }
}

任何人都可以编写新代码吗？这会很有帮助。

Answer 1

只需将一个方法附加到复选框的 onclick 处理程序:

function enableElement(id, enable) {
    document.getElementById(id).disabled=!enable;
}

<label>
  <input 
    type="checkbox" 
    onclick="enableElement('textform', this.checked)" 
  />
  ENABLE
</label> 

<br/>

<textarea id="textform" style="width:100%; height:200px" disabled>
  THIS IS TEXTAREA WITH ID "textform"
</textarea>

或另一种无需创建特殊单行方法的简化 - 只需在 onclick 事件中直接定义 Your will 即可:

<label>
  <input 
    type="checkbox"
    onclick="document.getElementById('textform').disabled = !this.checked" 
  />
  ENABLE
</label> 

<br/>

<textarea id="textform" style="width:100%; height:200px" disabled>
  THIS IS TEXTAREA WITH ID "textform"
</textarea>