JS复选框被选中

问题描述：

我目前工作的一个项目后，如何自动禁用文本字段，要求我执行以下操作：JS复选框被选中

我有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'。另外，考虑从你的HTML中分离出你的JS –

我该如何测试？ – Mirian

答

如果我是你，我会：

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

答

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

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提出了一些很好的建议，BTW），这是你需要的最小变化得到你想要的功能：

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

相关推荐