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

【问题标题】：How to automatically disable a text field after checkbox is ticked勾选复选框后如何自动禁用文本字段
【发布时间】：2017-09-05 19:42:50
【问题描述】：

我目前正在做一个项目，这需要我实现以下内容：

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

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

我错过了什么？

【问题讨论】：

也许将事件监听器绑定到文本字段上，检测是否有实际字符，然后采取相应的行动。
您可能想在复选框上测试.checked。另外，考虑将您的 JS 与您的 HTML 分开
我该如何测试？
你可以从谷歌搜索问题开始；）stackoverflow.com/questions/11552125/…

标签： javascript dom-events

【解决方案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 查看您添加了事件侦听器的元素是否被选中。

这里有一个小sn-p来帮助你：

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 代码更新你的问题，我相信人们会很乐意为你提供进一步的帮助。

【讨论】：

【解决方案2】：

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

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

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

说到底，如果您没有对代码进行其他更改以提高代码设计/质量（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);" >

【讨论】：