Jquery 单选按钮阻止单击事件默认，如果 ajax 失败

Question

我有单选按钮。Ajax 请求在单击时执行并返回响应。 success变量接收结果（true或false）。我需要的是仅在 ajax 成功时才进行无线电检查。但是在调用 ajax 之前它标记了检查。

$('input[type="radio"]').on('click',function (e){
    var success = callAjax();
    if (!success)
       e.preventDefault();
});

更新。

使用 preventDefault 的原因是将上一个单选按钮保留为选中状态。不仅仅是取消选中当前。

Answer 1

$('input[type="radio"]').on('click',function (e){
    var success = callAjax();
    if (!success){
       $(this).prop('checked', false);
    }
});

Answer 2

使用 $(this).prop("checked",false); 在 ajax 返回 true 时选中单选按钮。

以下代码可能会对您有所帮助。

$('input[type="radio"]').on('click',function (e){
    var success = callAjax();;
    if (!success){
        e.preventDefault();
        $(this).prop("checked",false);
    }
});

对于现场演示，请检查JSFIDDLE

Answer 3

所有 AJAX 请求都是异步运行的，这意味着在执行 AJAX 请求后不会立即收到响应。

您需要稍微更改代码才能使其正常工作：

$('input[type="radio"]').on('click',function (e){
    var _this = this;
    var currentState = $(this).prop("checked");
    callAjax(function(success) {
        if (!success)
             $(_this).prop("checked", !currentState);
    });
});

并且您应该更改callAjax方法以接收回调函数作为参数并调用然后使用success参数完成请求。

我希望你有一个想法！

Answer 4

您可以使用以下方法选中/取消选中复选框：

$("#chkBox").attr('checked', false); //uncheck 
$("#chkBox").attr('checked', true); //check