CODEWITHSUNDEEP
javascripthtmljquerycss
DotNet Coder
DotNet Coder

Reputation: 89

How to stop populating data in the disabled textbox field

I want to stop binding the data while the textbox is disabled. once i click the left side checkbox the value gets empty and the textbox gets disabled. But if i type any number on the parent textbox than the value gets populated in the disabled textbox.

here is the code below

//data populate for tier1 globally
        $("#txtPercentofTier1").on("change", function (e) {


            $('.txtDataPopTier1').val($(this).val());

            $('#txtPercentofTier1, #txtPercentofTier2').change(computeHead);
            $("#txtOON").val($('#txtPercentofTier1, #txtPercentofTier2').change(computeHead));


        });
        $("#txtPercentofTier1").on("keyup", function (e) {


            $('.txtDataPopTier1').val($(this).val());
            $('#txtPercentofTier1, #txtPercentofTier2').change(computeHead);


        });

        //data populate for tier2 globally
        $("#txtPercentofTier2").on("change", function (e) {
            $('.txtDataPopTier2').val($(this).val());
            $('#txtPercentofTier1, #txtPercentofTier2').change(computeHead);

            $("#txtOON").val($('#txtPercentofTier1, #txtPercentofTier2').change(computeHead));

        });
        $("#txtPercentofTier2").on("keyup", function (e) {


            $('.txtDataPopTier2').val($(this).val());
            $('#txtPercentofTier1, #txtPercentofTier2').change(computeHead);
           
        });

enter image description here

Upvotes: 0

Views: 156

Answers (1)

mwilson
mwilson

Reputation: 12900

The reason for this is due to you not checking that the input field is disabled before setting the value. It doesn't matter if the input field is disabled or not, you can still programmatically update it. Disabled essentially only applies to the person physically (trying) to type into the input.

$('#disabled').on('change', (e) => {
  const bool = $(e.target).is(':checked');
  $('#input2').attr('disabled', bool);
});

$('#input1').on('keyup', (e) => {
  const input2 = $('#input2');
  if (!input2.is(':disabled')) { // <- check to see if input is disabled
    input2.val(e.target.value);
  }
  

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input1" />
<input type="text" id="input2" />
<label for="disabled">Disable</label>
<input type="checkbox" id="disabled" />

Upvotes: 2

Related Questions