如何在JavaScript中根据条件设置复选框为只读

你的问题出在两个核心点上：

1. 复选框不支持readonly属性：浏览器对<input type="checkbox">的readonly属性不会限制用户交互——哪怕设置了这个属性，用户依然能正常勾选/取消勾选。要实现真正的禁用效果，必须使用disabled属性。
2. 缺少取消选中时的恢复逻辑：原代码只处理了Notengaged选中的情况，没有编写取消选中时将engaged恢复可用的逻辑。

修复后的JavaScript代码 #

function handleClick(cb) {
  const engagedCheckbox = document.getElementById('engaged');
  // 根据Notengaged的勾选状态，同步设置engaged的禁用状态
  engagedCheckbox.disabled = cb.checked;
  alert("Clicked, new value = " + cb.checked);
}

完整可运行代码示例 #

<div class="form-group row">
   <div class="col">
     1. 
     <input id="Notengaged" 
        asp-for="@Model.Sec3EmployedOutside" 
        type="checkbox" 
        onclick='handleClick(this);' 
     /> 
     I am not employed
   </div>
</div>
<div class="form-group row">
  <div class="col">
    3. 
    <input id="engaged" 
        asp-for="@Model.Sec3EmployedOutside" 
        type="checkbox" 
    /> 
    I am employed
  </div>
</div>

<script>
function handleClick(cb) {
  const engagedCheckbox = document.getElementById('engaged');
  engagedCheckbox.disabled = cb.checked;
  alert("Clicked, new value = " + cb.checked);
}
</script>

额外优化（可选） #

如果不想用内联onclick事件，推荐用事件监听的方式，代码更整洁易维护：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const notEngagedCheckbox = document.getElementById('Notengaged');
  const engagedCheckbox = document.getElementById('engaged');

  notEngagedCheckbox.addEventListener('change', function() {
    engagedCheckbox.disabled = this.checked;
  });
});

使用这段代码时，记得去掉HTML中Notengaged复选框的onclick='handleClick(this);'属性。

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