是否可以在单击时阻止复选框更改，等待检查？

Question

我今天遇到了一种情况，我希望复选框不会更改，除非关联的 ajax 调用成功。 “不更改”是指 - 如果当前选中了复选框，那么在 ajax 调用完成并成功之前，它不应显示为未选中。

示例 HTML：

<input type="checkbox" id="a" />

示例（伪）jQuery：

$("#a").change(function(e) {
    //somehow stop the checkbox from showing as checked in the UI
    $.ajax...
        success: function() {
            //checkbox should now show as checked in the UI
        },
        error: function() {
            //show error to user.  checkbox should still be unchecked.
        }
});

各种谷歌搜索只找到了获取或更改复选框状态的参考。

现在我只是在出错的情况下将复选框的状态改回来。

我想这可以通过使用图像来表示复选框并在适当的时间更改它们来完成，但我正在寻找一种使用“本机”HTML 元素、CSS 和/或 Javascript（或某些 Javascript 库）的解决方案)。只是好奇 stackoverflow 用户对此有什么看法。

谢谢！

Answer 1

尝试使用而不是change()、click() 函数并阻止其中的默认操作。然后成功后，您可以手动更改复选框状态。

这里example

$("#a").click(function(e) { 

        $.ajax...
            success: function() {
               $('a').attr('checked','checked')
            },
            error: function() {
                //show error to user.  check box should still be unchecked.
            }
        e.preventDefault();
        return false;
    });

Answer 2

是否可以阻止复选框在单击时更改，待处理 检查一下？

是的，您可以在运行 ajax 查询时暂时禁用该复选框。

---

看来你已经在使用jquery了，基于此，你可以试试：

$("#a").change(function(e) {
    $("input#a").attr("disabled", true); //disable input

    $.ajax...
        success: function() {
            $("input#a").removeAttr("disabled"); //re-enable input
        },
        error: function() {
            //show error to user.  check box should still be unchecked.
        }
});

---

注意：

您还应该在error: function() 中启用checkbox，但我关注了您的评论，因为我不知道您要完成什么。