javascript - Checkbox to disable text field on dynamically added rows

Question

I'm working with a checkbox which will disable amount textfield in the incoming added rows if the checkbox is unchecked and will enable the lot_price textfield if check.

IF(checkbox is checked) = Enable lot_price field and disable the incoming amount rows

IF(checkbox is unchecked) = Disable lot_price field and enable the incoming amount rows

Here is the current code

function disable() {
  var elements = document.getElementsByClassName("amount");
  document.getElementById("state").checked ? doIt(elements, true) : doIt(elements, false);
}

function doIt(elements, status) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].disabled = status;
  }
}
var rowCount = $('#table_body tr').length;
var m;
var month_label;
var check = document.getElementById("state");
if (check.checked) {

} else {

}
$(document).ready(function() {
  $("#add_row").click(function(e) {
    $('tr').find('input').prop('enabled', true)
    $('#addr' + rowCount).html('<td><input type="text" id="item_no" name="item_no[' + rowCount + ']" placeholder="" class="form-control"  autocomplete="off"></td>' +
      '<td><input type="text" id="stock_no" name="stock_no[' + rowCount + ']" placeholder="Stock No" class="form-control"  autocomplete="off"></td>' +
      '<td><input type="text" id="unit" name="unit[' + rowCount + ']" placeholder="Unit" class="form-control" autocomplete="off"></td>' +
      '<td><textarea name="description[' + rowCount + ']" id="description" rows="1" placeholder="Description" class="form-control" required></textarea></td>' +
      '<td><input type="text" id="quantity' + rowCount + '" name="quantity[' + rowCount + ']" placeholder="Quantity" class="form-control"  onkeypress="return isNumberKeyQTY(event)" autocomplete="off">' +
      '<td><input type="text" id="unit_cost' + rowCount + '" name="unit_cost[' + rowCount + ']" placeholder="Unit Cost" class="form-control" onkeypress="return isNumberKeyUCOST(event)" autocomplete="off"></td>' +
      '<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required></td>'
    );

    $('#tab_logic').append('<tr id="addr' + (rowCount + 1) + '"></tr>');
    rowCount++;
  });
});

//This will Remove the row
//before the last row then
//changes the id of the last
//row which is hidden
$('#remove_row').click(function() {
  var row_count_minus_btn = $('#table_body tr').length - 1
  if ($('#table_body tr').length != 2) {
    $("#table_body tr:nth-last-child(2)").remove();
    $('#table_body tr:last-child').attr('id', 'addr' + row_count_minus_btn);
    rowCount--;
  } else {
    swal("Oops...", "Cannot Delete First Row!", "warning");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="state" id="state" onclick="disable()">Check
<input type="text" id="lot_price" name="lot_price" placeholder="" class="form-control" value="" />
<table id="tab_logic">
  <thead>
    <tr>
      <th style="width: 4%; text-align: center;">Item<br> No.</th>
      <th style="width:10%; text-align: center">Stock No.</th>
      <th style="width:10%; text-align: center">Unit</th>
      <th style="width:36%; text-align: center">Description</th>
      <th style="width:10%; text-align: center">Quantity</th>
      <th style="width:15%; text-align: center">Unit Cost</th>
      <th style="width:15%; text-align: center">Amount</th>
    </tr>
  </thead>
  <tbody id="table_body">
    <tr id='addr1'>
      <td><input type="text" id="item_no" name="item_no[1]" placeholder="" class="form-control" autocomplete="off"></td>
      <td><input type="text" id="stock_no" name="stock_no[1]" placeholder="Stock No" class="form-control" autocomplete="off"></td>
      <td><input type="text" id="unit" name="unit[1]" placeholder="Unit" class="form-control" autocomplete="off"></td>
      <td><textarea name="description[1]" id="description" rows="1" placeholder="Description" class="form-control" required></textarea></td>
      <td><input type="text" id="quantity0" name="quantity[1]" placeholder="Quantity" class="form-control" onkeypress='return isNumberKeyQTY(event)' autocomplete="off"></td>
      <td><input type="text" id="unit_cost0" name="unit_cost[1]" placeholder="Unit Cost" class="form-control" onkeypress='return isNumberKeyUCOST(event)' autocomplete="off"></td>
      <td><input type="text" id="amount0" name="amount[1]" placeholder="Amount" class="form-control amount" required></td>
    </tr>
    <tr id="addr2">
  </tbody>
</table>
<button type="button" id="add_row" style="display: inline;" class="btn btn-primary btn-md center-block">Add More Rows <span class="glyphicon glyphicon-plus"></span></button>
<button type="button" id="remove_row" style="display: inline;" class="btn btn-danger btn-md center-block">Delete Last Row <span class="glyphicon glyphicon-remove"></span></button>

question from:https://stackoverflow.com/questions/66056911/checkbox-to-disable-text-field-on-dynamically-added-rows

Answer 1

Please add some logic to your function

Disable your lot_price on initial

Missing logic to enable/disable lot_price when checkbox was check/uncheck

function disable(){
   ...
   ...
   // Enable/disable lot_price
}

Missing logic to enable/disable amount textbox when add new row to list

$('#addr' + rowCount).html(
...
+ '<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required '
+ ( document.getElementById("state").checked?"disabled":"")
+'></td>');

Please run below snippet for test

function disable() {
        var elements = document.getElementsByClassName("amount");
        document.getElementById("state").checked ? doIt(elements, true) : doIt(elements, false);
      
        // Enable/disable lot_price
       document.getElementById("lot_price").disabled = !document.getElementById("state").checked;
    }

    function doIt(elements, status) {
        for (var i = 0; i < elements.length; i++) {
            elements[i].disabled = status;
        }
    }
    var rowCount = $('#table_body tr').length;
    var m;
    var month_label;
    var check = document.getElementById("state");
    if(check.checked){
        
    }else{
        
    }
    $(document).ready(function() {
        $("#add_row").click(function(e) {
        $('tr').find('input').prop('enabled',true)
        $('#addr' + rowCount).html('<td><input type="text" id="item_no" name="item_no[' + rowCount + ']" placeholder="" class="form-control"  autocomplete="off"></td>'
            + '<td>...</td>'
           + '<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required '+( document.getElementById("state").checked?"disabled":"")+'></td>'
        );

        $('#tab_logic').append('<tr id="addr' + (rowCount + 1) + '"></tr>');
        rowCount++;
        });
    });

    //This will Remove the row
    //before the last row then
    //changes the id of the last
    //row wich is hidden
    $('#remove_row').click(function(){
        var row_count_minus_btn = $('#table_body tr').length - 1
        if($('#table_body tr').length != 2){
            $("#table_body tr:nth-last-child(2)").remove();
            $('#table_body tr:last-child').attr('id', 'addr' + row_count_minus_btn);
            rowCount--;
        }else{
            console.log("Oops...", "Cannot Delete First Row!", "warning");
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="state" id="state" onclick="disable()">Check
<input type="text" id="lot_price"  name="lot_price" placeholder=""  class="form-control" value="" disabled/>
<table id="tab_logic">
    <thead>
        <tr>
            <th>Item No.</th>
            <th>...</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody id="table_body">
    <tr id='addr1'>
          <td><input type="text" id="item_no" name="item_no[1]" placeholder="" class="form-control" autocomplete="off">           </td><td>...
          </td> <td><input type="text" id="amount0" name="amount[1]" placeholder="Amount" class="form-control amount" required></td>
    </tr>
    <tr id="addr2">
   </tbody>
 </table>
 <button type="button" id="add_row" style="display: inline;" class="btn btn-primary btn-md center-block" >Add More Rows <span class="glyphicon glyphicon-plus"></span></button>
<button type="button" id="remove_row" style="display: inline;" class="btn btn-danger btn-md center-block" >Delete Last Row <span class="glyphicon glyphicon-remove"></span></button>