如何在取消事件中捕获并恢复复选框的原始选中状态

我懂你的困扰——点击Cancel按钮时，复选框没能回到最初的选中/未选中状态，反而直接变成了未选中。这是因为你的代码用错了控制复选框选中状态的方法，咱们来快速修复它：

问题根源 #

你当前的Cancel函数里用了$("#chk" + ID).val(IsBlock)，但val()是用来设置复选框的value属性（也就是表单提交时传递的值），根本不是控制它是否被选中的状态。复选框的选中状态是由checked属性决定的，必须用prop()方法来修改。另外，从后端传过来的IsBlock大概率是字符串类型（比如"True"或"False"），直接使用的话无法正确转换为布尔值，导致设置失效。

修改后的代码 #

把你的Cancel函数改成这样：

function Cancel(Login, ID, IsBlock) {
    debugger;
    // 把后端传来的字符串状态转为布尔值
    const originalCheckedState = IsBlock.toLowerCase() === 'true';
    // 正确设置复选框的选中状态
    $("#chk" + ID).prop("checked", originalCheckedState);
    $("#chk" + ID).prop("disabled", true);
    document.getElementById("Edit " + ID).style.display = 'block';
    document.getElementById("Update " + ID).style.display = 'none';
    document.getElementById("Cancel " + ID).style.display = 'none';
}

关键改动说明 #

1. 替换val()为prop("checked", ...)：直接操作复选框的checked属性，这才是控制选中状态的正确方式。
2. 类型转换：把后端传来的字符串（比如"True"）转为布尔值，确保prop()能准确识别并设置原始状态。

这样修改后，点击Cancel按钮时，复选框就会精准恢复到你从后端获取的原始IsBlock状态了。

内容的提问来源于stack exchange，提问作者Yash Katiyar