Javascript 勾选复选框后如何自动禁用文本字段

我目前正在从事一个项目，该项目要求我实施以下内容：

我有两个输入字段-一个常规的文本字段和一个复选框

我想做的是-如果用户填写文本字段，复选框应该自动禁用。如果改为选中复选框，则应禁用文本字段

到目前为止，我想到的是：

<input type="text" name="num-input1" id="dis_rm"  value="" 
onblur="document.getElementById('dis_per').disabled = (''!=this.value);" >
<input type="checkbox" name="num-input2" id="dis_per" value="" 
onblur="document.getElementById('dis_rm').disabled = (''!=this.value);" >

如果我填写文本字段，复选框将被成功禁用。但是，如果勾选该复选框，文本字段仍然可用

我错过了什么？

如果我是你，我会：

• 将我的JS代码从HTML中移到一个单独的文件中，或者至少移到一个

  script

  元素中
• 使用

  document.getElementById

  在DOM中查找项。看
• 从DOM中获得元素后，为模糊事件添加一个事件侦听器，如下所示

  myElement.addEventListener（'blur'，myCallbackMethod）

  。有关更多信息，请参阅
• 在回调方法中，可以使用

  event.target.checked

  查看是否选中了已添加事件侦听器的元素

下面是一个小片段，让您开始学习：

const
textInput=document.getElementById（'element-ID-here'），
checkbox=document.getElementById（'element-ID-here'）；
函数处理程序（事件）{
//如果textinput值为空，则
//将复选框的禁用设置为false
//否则
//将chexbox的禁用设置为true
}
textInput.addEventListenet（'blur'，ontdeputBlurHandler）
人们在评论和回答中提出了很好的建议，以提高代码设计和质量，但从纯功能的角度来看，要获得所描述的功能，您应该做两件核心事情：

1） 正如Paul S.

所提到的，为复选框逻辑使用

checked

属性。现在，您正在检查复选框值是否不是空字符串，但它将始终是空字符串，因为这是您分配给元素的值：

<input type="checkbox" name="num-input2" id="dis_per" value="" <----- *here*

2） 将要绑定（至少）复选框的事件切换为“更改”事件，而不是“模糊”。对于复选框，“更改”事件将在您单击复选框（或点击空格键）时触发，但元素仍保持其焦点。只有当用户将焦点移动到页面的另一个元素时，模糊事件才会触发

我还建议对文本字段使用“更改”（如果您离开字段时的值与输入字段时的值相同，则运行检查没有意义），但从时间角度看，这并不重要，因为当“更改”事件触发时，它会在“模糊”事件之后立即发生，因此，从用户的角度来看，行为是相同的

---

说到做到，如果您没有对代码进行其他更改以提高代码设计/质量（

Thijs

提出了一些很好的建议，顺便说一句），那么这是您获得所需功能所需的最小更改：

<input type="text" name="num-input1" id="dis_rm" value=""
       onblur="document.getElementById('dis_per').disabled = (''!=this.value);" >
<input type="checkbox" name="num-input2" id="dis_per" value=""
       onchange="document.getElementById('dis_rm').disabled = (this.checked);" >

可能会将事件侦听器绑定到文本字段，以便在键向上时检测是否存在实际字符，然后相应地进行操作。您可能需要测试

。选中复选框上的
。同样，考虑把你的JS从你的HTMLL中分离出来，我会测试吗？你可以从Google问题开始。
<input type="text" name="num-input1" id="dis_rm" value=""
       onblur="document.getElementById('dis_per').disabled = (''!=this.value);" >
<input type="checkbox" name="num-input2" id="dis_per" value=""
       onchange="document.getElementById('dis_rm').disabled = (this.checked);" >