Кнопка JQuery preventDefault при событии клика, если 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

Используйте $(this).prop("checked",false);, чтобы проверить переключатель, когда ajax возвращается true.

После кода может помочь вам ..

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

Для Live Demo Пожалуйста, проверьте JSFIDDLE

Answer 2

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

}); 

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