on change in jquery doesnt work with readonly input field

Question

i have some fields in my form, which are like below:

$(document).on("change", ".qty2", function() {
  var sum1 = 0;
  $(".qty2").each(function() {
    sum1 += +$(this).val();
  });
  $("#subtotal").val(sum1);
});

$(document).on("change", "#subtotal", function() {

  var subt = $("#subtotal").val();

  var tot_price = (subt * 9 / 100);
  var divobj = document.getElementById('cgst');
  var divobj1 = document.getElementById('sgst');
  divobj.value = tot_price;
  divobj1.value = tot_price;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control qty1" id="subtotal" required name="subtotal" readonly>
<input type="text" class="form-control qty1" id="cgst" required name="cgst" readonly>
<input type="text" class="form-control qty1" id="sgst" required name="sgst" readonly>

here apart from the first input field 'price', all other 3 are readonly, when user enters something in price field, that value is taken to subtotal, and from there i need to calculate sgst and cgst and display it in their respective fields, however in my code only till subtotal display is working, can anyone please tell me how to fix this, thanks in advance

Answer 1

just comment on change event on #Subtotal lines in your code and you are good to go.

$(document).on("change", ".qty2", function() {
  var sum1 = 0;
  $(".qty2").each(function() {
    sum1 += +$(this).val();
  });
  $("#subtotal").val(sum1);
// });

// $(document).on("change", "#subtotal", function() {

  var subt = $("#subtotal").val();

  var tot_price = (subt * 9 / 100);
  var divobj = document.getElementById('cgst');
  var divobj1 = document.getElementById('sgst');
  divobj.value = tot_price;
  divobj1.value = tot_price;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control qty1" id="subtotal" required name="subtotal" readonly>
<input type="text" class="form-control qty1" id="cgst" required name="cgst" readonly>
<input type="text" class="form-control qty1" id="sgst" required name="sgst" readonly>