Radio button to disable other inputs works for one element with Query Selector but not QuerySelectorAll

Question

I have tried to create a section of a form which is disable if user choose A and accessible if user choose B.

document.getElementById('delivery').onclick = function() {
        var disabled = document.querySelectorAll(".disabled").disabled;
        if (disabled) {
            document.querySelectorAll(".disabled").disabled = false;
        }
        else {
            document.querySelectorAll(".disabled").disabled = true;
        }
    }

<!--The toggle button-->

<div class="radio-choice">
  <input type="radio" name="pickup-delivery" id="pickup" value="pickup">Pick-up</input>
  <input type="radio" name="pickup-delivery" id="delivery" value="delivery">Delivery</input>
</div>


<!--The part that should be disable if user choose pick-up method-->

  <label for="street_address" class="delivery-label disabled-label">Street Address:</label>
      <input type="text" id="street_address" class="disabled" name="street_address" disabled>
    
      <label for="city" class="delivery-label disabled-label">City:</label>
      <input type="text" id="city" class="disabled" name="city" disabled>
    
      <label for="zip_code" class="delivery-label disabled-label">Zip Code:</label>
      <input type="text" id="zip_code" class="disabled" name="zip_code" disabled>

What is really weird is that this code works with QuerySelector, but ofc only for one element, but not QuerySelectorAll.

I am just using Javascript and not JQuery as I have just started coding and don't master libraries.

Thanks in advance for your help.

[querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) returns a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) so you should use a loop to iterate over each value. — Reyno, Aug 11 '22 at 09:08

score 0 · Answer 1 · answered Aug 11 '22 at 09:09

0

querySelectorAll returns an Array not a element, you should do:

document.querySelectorAll(".disabled").foreach((e)=>{e.disabled = true})

instead of

document.querySelectorAll(".disabled").disabled = true;

answered Aug 11 '22 at 09:09

Edoldin

160
6

FYI: it returns a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) not an array. It also is `forEach` not `foreach` – Reyno Aug 11 '22 at 09:10

score 0 · Accepted Answer · answered Aug 11 '22 at 09:39

0

As mentioned, you should loop over the node list. You should also avoid using var as it's bad practice. I would also suggest some changes to your code to make it a bit more readable:

const disabled = document.querySelectorAll('.disabled')

  document.querySelectorAll('input[name="pickup-delivery"]').forEach((elem) => {
    elem.addEventListener("click", function(e) {
      const item = e.target.value;
      if(item==="pickup")  {
      disabled.forEach(e=>{e.disabled = true})
      }else{
      disabled.forEach(e=>{e.disabled = false})
      }
    });
  });

answered Aug 11 '22 at 09:39

MeL

1,269
3
12
30

Thanks a lot, I had totally missed the fact the way querySelectorAll is generating an array. So much to learn. Thanks again, I was stuck on it for a full day! – Reggroy Aug 11 '22 at 09:43
No worries, we all keep learning every day :) – MeL Aug 11 '22 at 09:46

Radio button to disable other inputs works for one element with Query Selector but not QuerySelectorAll

2 Answers2