Question

如果我有单选按钮：

<input id="y0" type="radio" name="myRadioBtns" value="a" checked> <label for="y0"></label>
<input id="y1" type="radio" name="myRadioBtns" value="b">  <label for="y1"></label>
<input id="y2" type="radio" name="myRadioBtns" value="c">  <label for="y2"></label>

为了确保“更改”事件仅绑定到单选按钮一次，我做了类似这样的事情：

var $el = $('input[name='myRadioBtns']');

if(!($el.data('events') && $el.data('events').change)) {

   $el.change(function() {
       //EVENT HANDLER
   });
}

此时正常，“更改”事件仅绑定到我的单选按钮一次。

但是，我也希望事件处理程序只被调用一次。我的意思是，如果我选择一个单选按钮，我的事件处理程序将被调用，然后等待服务器端的响应，有时需要5秒，在5秒内，如果用户更改为选择另一个单选按钮，则更改事件处理程序将再次被称为！

我的问题是如何确保只调用一次事件处理程序，那就是当“change”事件处理程序被触发时如何禁用选择单选按钮？

Answer 1

如果您正在使用jQuery的$ .ajax，您是否尝试过将其作为同步请求？

$.ajax({
    type:'GET',
    async:false, // add this one 
    success: function() { 

    }

});

这应该阻止事情发生。

“请注意，同步请求可能会暂时锁定浏览器，在请求处于活动状态时禁用任何操作。“http://api.jquery.com/jQuery.ajax/

虽然这可能是最简单的解决方案，但阻止网站互动通常是不好的做法。这样做会更理想：

    $.ajax({
        beforeSend: function() { 
            $('input[name=myRadioBtns]').prop('disabled',true);
        }, 
        success: function() { 
            $('input[name=myRadioBtns]').prop('disabled',false);
        } 
    });

Answer 2

$el.change(function() {
    $(this).prop("disabled",true);
    $.ajax({
        url: ajax_url,
        ...
        success: reenableRadio
    });
}); 

function reenableRadio() {
    $el.prop("disabled",false);
}

Answer 3

如果您的意思是希望在事件处理程序中发生的任何事情期间禁用单选按钮，然后再次启用，则可以先禁用它，然后在AJAX调用的回调中再次启用它（I假设您在事件处理程序中有一个AJAX调用，因为您说您等待服务器的响应时间为5秒钟：

$el.change(function() {
    var radio = $(this);
    radio.prop("disabled", true);
    $.post("somescript.php", function() {
        radio.prop("disabled", false);
    });
});

此外，我假设在编写问题时只是一个错误，但请注意您的问题中的代码有语法错误，（检查引号）：

var $el = $('input[name='myRadioBtns']'); //Should be [name="myRadioBtns"]

Answer 4

您可以在请求期间禁用单选按钮，并在请求完成时重新启用它们。

如果您不允许禁用它们，则可以使用此方法：

var radioRequestSend = false;
$el.change(function() {
    // if 
    if (radioRequestSend) return false;

    // fire your ajax request and set radioRequestSend to true
    radioRequestSend = true;
});

in your ajax response handler reset radioRequestSend to false.

：）

当选择单选按钮非常快时，如何确保只调用一个事件处理程序？

4 个答案: