jQuery checkbox change and click event

0 votes
$(document).ready(function() { 
    //set initial state. 
    $('#textbox1').val($(this).is(':checked')); 
  
    $('#checkbox1').change(function() { 
    $('#textbox1').val($(this).is(':checked')); 
}); 

$('#checkbox1').click(function() { 
  if (!$(this).is(':checked')) { 
    return confirm("Are you sure?"); 
      } 
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input type="checkbox" id="checkbox1"/><br /> 
<input type="text" id="textbox1"/>

Here .change() updates the textbox value with the checkbox status. I use .click() to confirm the action on uncheck. If the user selects cancel, the checkmark is restored but .change() fires before confirmation which leaves things in an inconsistent state and the textbox says false when the checkbox is checked. How can I deal with the cancellation and keep textbox value consistent with the check state?

Feb 23, 2022 in Java-Script by Soham
• 9,700 points
31,574 views

1 answer to this question.