How can i disable multiple inputs with JS?

Question

I tried this

  <body>
    <input placeholder="test1" class="input"/>
    <input placeholder="test2" class="input"/>
  </body>
  <script>
       document.querySelector(".input").disabled = true;
  </script>

Why is the second input (test2) not disabled. Thanks!

The .querySelector() function will only ever return 1 element (or null). — Pointy
– Pointy, Commented Nov 10, 2020 at 20:33

Coupe · Accepted Answer · 2020-11-10 20:35:16Z

6

document.querySelector only selects the first instance of what your searching for, you need to use document.querySelectorAll('input') to select all the instances of your inputs, which returns an array you can go through,

var inputs = document.querySelectorAll('.input')
for (let i = 0;i<inputs.length;i++) {
  inputs[i].disabled = true
}

Alternatively use ForEach

var inputs = document.querySelectorAll('.input')
inputs.forEach((input)=>{
  input.disabled = true
})

answered Nov 10, 2020 at 20:35

Coupe

3722 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mykaf Over a year ago

FWIW, document.querySelectorAll() returns a NodeList, and forEach() doesn't support NodeLists in Internet Explorer.

Tom Over a year ago

You can use Array.from to convert to an array before using for each. Array.from(document.querySelectorAll('.input')).forEach()

Aib Syed · Accepted Answer · 2020-11-10 20:41:15Z

2

Try querySelectorAll

Run the snippet below:

var allinputs = document.querySelectorAll('.input');
for (var i = 0, len = allinputs.length; i<len; i++){
    allinputs[i].disabled = true;
}

<input class="input"></input>
<input class="input"></input>

edited Nov 10, 2020 at 20:41

answered Nov 10, 2020 at 20:35

Aib Syed

3,1942 gold badges24 silver badges30 bronze badges

Comments

gavgrif · Accepted Answer · 2020-11-10 21:31:03Z

if you wrap the inputs in a <fieldset> ... </fieldset> tag and set the disabled attribute on that <fieldset disabled> - all children inputs will be disabled .

input:disabled {
 cursor: not-allowed;
}

  <fieldset disabled>
    <legend>Fieldset disabled - causes all children inputs to be disabled:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
  
  <hr/>
    <fieldset>
    <legend>Fieldset not disabled:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
  </fieldset>

Collectives™ on Stack Overflow

How can i disable multiple inputs with JS?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related