Jquery 单选按钮 preventDefault 在单击事件上，如果 ajax 失败答案

【问题标题】：Jquery radio button preventDefault on click event, if ajax failsJquery 单选按钮 preventDefault 在单击事件上，如果 ajax 失败
【发布时间】：2025-11-27 01:05:02
【问题描述】：

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

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

更新。

使用 preventDefault 的原因是选中前一个单选按钮。不只是取消选中当前。

【问题讨论】：

更新答案请检查...

标签： jquery ajax preventdefault

【解决方案1】：

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

});

【讨论】：

【解决方案2】：

当 ajax 返回 true 时，使用$(this).prop("checked",false); 检查单选按钮。

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

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

如需现场演示，请查看JSFIDDLE

【讨论】：

【解决方案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 参数完成请求。

我希望你有一个想法！

【讨论】：

【解决方案4】：

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

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

【讨论】：