jQuery复选框更改和单击事件

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

此处.change()使用复选框状态更新文本框值。我.click()用来确认取消选中的操作。如果用户选择“取消”，则复选标记会恢复，但.change()会在确认前触发。

这会使事情处于不一致状态，并且选中复选框时文本框会显示false。

如何处理取消并保持文本框值与检查状态一致？

Answer 1

在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'));        
    });
});