Home / Questions / 301600
Accepted
Andrés Ucero
Asked: 2020-10-18 06:25:07 +0800 CST 2020-10-18 06:25:07 +0800 CST

How to disable a list of checkboxes and inputs extracted from a DB with JavaScript?

  • 772

In my DB I have two tables called 'product' and 'material', I am doing a CRUD for the products and in the 'create' view I extract the list of materials registered in the DB in order to select the amount of materials that were used in the production of a product.

Below is a table which contains a list of checkboxes with the materials, and an input of type number which will record the amount of material used:

 <table class="table">

    @foreach($material as $mat)
    <tr>
    <td style="width: 50%">
<input type="checkbox" id="boxMat" name="mat[]" value="{{$mat['id']}}">{{$mat['nombre']}}
   </td>

     <td style="width: 25%">
        <input class="input-group-text" id="unidadM" type="number" name="unidadM[]" min="0" >
    </td>
    <td style="width: 25%">
       {{$mat['unidad']}}
    </td>
    </tr>

    @endforeach
   </table>

and the following code in JavaScript

for (var i = 0; i < document.getElementsByName("unidadM[]").length; i++) {

  document.getElementByName('mat[]')[i].onchange = function() {
    document.getElementByName('unidadM[]')[i].disabled = !this.checked;
  }

}

What I want is that when loading the 'create' view, the inputs that are next to the checkbox list are disabled, and are enabled only if the corresponding checkbox is selected.

javascript

1 Answers

  1. Best Answer

    I recommend that when you create the inputs within a loop, you assign an incremental to it, idfor example id="boxMat1", id="boxMat2", etc., Since the id must be unique, mentioned this, I will explain the code, we obtain the checkbox labels (I already did that). you are clear), likewise we go through them with a for, then by means of idwe add a .addEventListenertype change, we obtain the idone of the selected checkbox and we make a split()to obtain only the number (although you can add attributes data-*to not occupy it), we save in a variable idNum the position [1]that would be the number that we require, then we validate if the check is checkedenabled the input type number-> document.getElementById(num${idNum}).disabled = false; and if it is not checked we de-enable it. I hope it is what you require, any questions let me know.

    var check = document.getElementsByName('mat[]');

for(var i = 0; i < check.length; i++){
    let checks = check[i].id;
    
   document.getElementById(checks).addEventListener('change',function(){
    
    let idCheck = this.id.split('check');
      
      let idNum = idCheck[1];
      
      console.log(idNum);
      
      if(this.checked){
        document.getElementById(`num${idNum}`).disabled = false;
        
      }else{
      
        document.getElementById(`num${idNum}`).disabled = true;
      
      }
    
    
    })
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check1" name="mat[]" value="1">
<input type="checkbox" id="check2" name="mat[]" value="2">

<input type="number" id="num1" name="unidadM[]" disabled>
<input type="number" id="num2" name="unidadM[]" disabled>

    • 1