Help, Javascript for loop??

[ian escasa]

Hi, I just want to seek help resolving my javascript, 

First, I already have a dynamic textboxes where i able to enable and disable with a checkbox.

I need to have atleast 100 textfields

wherein my javascript, I need to declare this variables below.  which are already like ten(10) but i need a 100.

My question is, how can I make this easy and short?

 

<script type="text/javascript">

            function letter_changed(letterCheckBox){

                if(letterCheckBox.checked){

                document.getElementById("requestChemicalName").disabled = false;
                document.getElementById("requestChemicalName2").disabled = false;
                document.getElementById("requestChemicalName3").disabled = false;
                document.getElementById("requestChemicalName4").disabled = false;
                document.getElementById("requestChemicalName5").disabled = false;
                document.getElementById("requestChemicalName6").disabled = false;
                document.getElementById("requestChemicalName7").disabled = false;
                document.getElementById("requestChemicalName8").disabled = false;
                document.getElementById("requestChemicalName9").disabled = false;
                document.getElementById("requestChemicalName10").disabled = false;

                } else {
                document.getElementById("requestChemicalName").disabled = true;
                document.getElementById("requestChemicalName2").disabled = true;
                document.getElementById("requestChemicalName3").disabled = true;
                document.getElementById("requestChemicalName4").disabled = true;
                document.getElementById("requestChemicalName5").disabled = true;
                document.getElementById("requestChemicalName6").disabled = true;
                document.getElementById("requestChemicalName7").disabled = true;
                document.getElementById("requestChemicalName8").disabled = true;
                document.getElementById("requestChemicalName9").disabled = true;
                document.getElementById("requestChemicalName10").disabled = true;
                }
            }

</script>

 

Thanks in advance!

[Funce]

You could use a For loop in combination with document.getElementsByClassName

And add a class to all the elements you want disabled together.

<h2>ClassName For Loop</h2>

<label><input onchange="some_function(this);" type="checkbox" checked>Check</label>
<input type="text" class="some-class">
<input type="text" class="some-class">
<input type="text" class="some-class">
<input type="text" class="some-class">
<input type="text" class="some-class">
<input type="text" class="some-class">
<input type="text" class="some-class">
<input type="text" class="some-class">
<input type="text" class="some-class">
<input type="text" class="some-class">

<script>
function some_function(letterCheckBox) {
  var element_list = document.getElementsByClassName("some-class");
  let element_length = element_list.length;
  let element_disable = !letterCheckBox.checked;
  for (let i = 0; i < element_length; i++) {
    element_list[i].disabled = element_disable;
  }
}
</script>

</body>
</html>

 

[dsonesuk]

IF these inputs are within a form you can use form .elements collection, then filter them with if condition of type="text".

OR

Since you already have unique identifier of input element to target as in type="text".

document.querySelectorAll("[type='text']");

More specific:

document.querySelectorAll(".parent_class [type='text']");

document.querySelectorAll("#parent_id [type='text']");

It really depends how they positioned relative to each other, separately or together under one parent container element.