[解決済み] jQuery チェックボックスの変更とクリックイベント

質問

$(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"/>

ここで .change() は、チェックボックスの状態に応じてテキストボックスの値を更新します。私は .click() を使用して、チェック解除時の動作を確認します。ユーザーがキャンセルを選択した場合、チェックマークは元に戻りますが .change() を確認する前に起動する。

これでは、物事に一貫性がなく、チェックボックスがチェックされたときにテキストボックスがfalseと表示されることになります。

キャンセルに対応し、テキストボックスの値をチェックの状態と一致させるにはどうしたらよいでしょうか。

どのように解決するのですか？

でテストしました。 JSFiddle この方法には、チェックボックスに関連付けられたラベルがクリックされたときに実行されるという利点もあります。

回答を更新しました。

$(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);        
    });
});

オリジナルの回答

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

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