如何使用Angular实现checkbox控制disabled文本框的启用禁用切换

直接通过监听复选框的状态变更事件，同步修改文本框的disabled属性即可，完整实现如下：

基础HTML结构 #

先写好初始状态的元素，文本框默认加原生disabled属性保持禁用：

<input type="text" id="myInput" disabled placeholder="勾选后可编辑">
<label>
  <input type="checkbox" id="enableCheck"> 启用输入框
</label>

交互逻辑代码 #

不需要引入额外库，原生JS就能实现，逻辑非常简单：

const checkBox = document.getElementById('enableCheck');
const textInput = document.getElementById('myInput');

checkBox.addEventListener('change', function() {
  // 复选框选中时checked为true，此时disabled取反为false，输入框启用；未选中时逻辑反过来
  textInput.disabled = !this.checked;
});

• 注意点：直接操作DOM元素的disabled布尔属性即可，不需要用setAttribute/removeAttribute方法，避免出现属性状态和实际表现不一致的问题。
• 因为初始状态复选框默认未勾选、输入框默认禁用，两者状态天然匹配，不需要额外加初始化赋值逻辑。

内容的提问来源于stack exchange，提问作者saurabh solanke