How to automatically disable a text field after checkbox is ticked

Question

I am currently working on a project, that requires me to implement the following:

I've got 2 input fields - a regular text field , and a checkbox .

What I want to do is - if the user fills in the text field, the checkbox should be automatically disabled. If the checkbox is checked instead, the text field should be disabled.

What I've come up with so far is:

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

If I fill in the text field, the checkbox is successfully disabled. However, if I tick the checkbox, the text field remains available.

What am I missing?

Answer 1

If I were you I would:

• Move my JS code out of the HTML and into a separate file or at least into a script element.
• Use document.getElementById to find an item in the DOM. See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
• Once you have the element from the DOM, add an event listener for the blur events like this myElement.addEventListener('blur', myCallbackMethod) . See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener for more info.
• Inside your callback method you can use event.target.checked to see if the element you've added the event listener to is checked.

Here is a little snippet to get you going:

 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=""/>

With this info you should be able to get (a little) further. When you do, update your question with your JavaScript code and I am sure people will be happy to help you further.

Answer 2

People are bringing up great suggestions in the comments and answers for better code design and quality, but from a purely functional point of view, there are two core things that you should do to get the functionality that you are describing:

1) As mentioned by Paul S. use the checked property for your checkbox logic. Right now, you are checking to see if the checkbox value is not an empty string, but it will always be an empty string, because that's the value that you've assigned to the element:

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

Nothing else in your code is changing that, so it will always fail the logic check.

However, the checked property automatically switches between true and false as you check and uncheck the input. To do the logic check that you are looking for using that, do this for your JavaScript!

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

2) Switch the event that you are binding for (at least) the checkbox to the "change" event instead of "blur". For checkboxes, the "change" event will trigger when you click on the checkbox (or hit space bar), but the element still maintains its focus. The blur event Will only fire once the user moves the focus to another element of the page.

I'd also recommend using "change" for the text field (there's no point in running the check, if the value is the same when you leave the field as it was when you entered it), but it's not as important since, from a timing point of view, when the "change" event fires, it happens immediately after the "blur" event, so, from the user's point-of-view, the behavior would be the same.

---

When it's all said and done, if you made no other changes to your code to improve the code design/quality ( Thijs made some great suggestions, BTW), this is the minimum change that you would need to get the functionality that you want:

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