jQuery checkbox change and click event

Question

$(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?

Answer 1

Have shared an approach which will add the benefit of firing when a label associated with a checkbox is clicked. 

$(document).ready(function() { 
        //set initial state. 
        $('#textbox1').val(this.checked); 

        $('#checkbox1').change(function() { 
          if(this.checked) { 
              var returnVal = confirm("Are you sure?"); 
              $(this).prop("checked", returnVal); 
    } 
    $('#textbox1').val(this.checked); 
    });
});