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

Question

我目前正在开展一个项目，该项目要求我实现以下内容：

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

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

到目前为止我想出的是：

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

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

我错过了什么？

Answer 1

如果我是你我会：

• 将我的 JS 代码从 HTML 中移到一个单独的文件中，或者至少移到一个script元素中。
• 使用document.getElementById在 DOM 中查找项目。 请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
• 从 DOM 中获得元素后，为模糊事件添加一个事件侦听器，例如myElement.addEventListener('blur', myCallbackMethod) 。 有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener 。
• 在您的回调方法中，您可以使用event.target.checked来查看您添加了事件侦听器的元素是否被选中。

这是一个小片段，可以帮助您前进：

 const textInput = document.getElementById('element-ID-here'), checkbox = document.getElementById('element-ID-here'); function onTextInputBlurHandler(event) { // if textinput value is empty then // set disabled for checkbox to false // else // set disabled for chexbox to true } textInput.addEventListenet('blur', onTextInputBlurHandler);

 <input type="text" name="num-input1" id="dis_rm" value=""/> <input type="checkbox" name="num-input2" id="dis_per" value=""/>

有了这些信息，您应该能够（一点）进一步了解。 当你这样做时，用你的 JavaScript 代码更新你的问题，我相信人们会很乐意为你提供进一步的帮助。

Answer 2

人们在评论和答案中提出了更好的代码设计和质量的好建议，但从纯粹的功能角度来看，您应该做两件核心事情来获得您所描述的功能：

1) 正如Paul S.所提到的，将checked属性用于您的复选框逻辑。 现在，您正在检查复选框值是否不是空字符串，但它始终是空字符串，因为这是您分配给元素的值：

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

您的代码中没有其他任何内容会改变它，因此它始终无法通过逻辑检查。

但是， checked属性会在您选中和取消选中输入时自动在true和false之间切换。 要执行您正在寻找的逻辑检查，请为您的 JavaScript 执行此操作！

document.getElementById('dis_rm').disabled = this.checked;

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