Question

代码：

$('input.media-checkbox').live('click', function(e){

    e.preventDefault();
    var that = $(this);

    if (that.attr('checked') == 'checked'){

        var m = that.attr('media');
        var mid = 'verify_' + m;
        that.parents('div.state-container').find('ul.' + mid).remove();
        that.attr('checked', false);
    } else {

        var url = AJAX_URL;

        $.ajax({
           type: 'GET',
           url: url,
           dataType: 'html',
           success: function(data){

                that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500);
                that.attr('checked', 'checked');
           }
        }); 
    }

    return false;
});

我在表单中ajaxing，然后在相关的复选框上触发click事件到另一部分的ajax，如果有必要的话。表单插入很好，点击事件被触发，检查需要检查的框并触发第二个ajax，因为复选框的checked属性最初是false。

如果我取消其中一个盒子，我的奶酪是什么？尽管e.preventDefault()，checked属性在测试之前设置为false，因此if语句始终执行else语句。我也用$.is(':checked')尝试了这个，所以我完全不知所措。

似乎未选中 - ＆gt;检查状态读取原始状态，但检查 - ＆gt;未经检查不会。有什么帮助吗？

Answer 1

B.E。，我知道已经过了一年，但我认为我找到了解决方案，

这里的问题是实际调用click事件并在“checked”属性添加到复选框输入之前运行。因此该函数运行，查看输入是否具有“checked”属性，并运行else条件。然后该元素被赋予“已检查”属性。

我也遇到了这个问题，我的解决方案是将函数绑定到更改函数而不是click函数，因为更改仅在输入更新checked属性后触发。

希望这可以帮助你，如果没有，那么在遇到类似问题时碰巧偶然发现这篇文章的其他人。

Answer 2

好吧，对。您已设置live事件，因此我认为您的脚本可能也会响应将其设置为已选中，但我无法完全了解您在此处尝试的内容而未看到标记，但这是我的重写。

$('input.media-checkbox').live('click', function(e){

    if ($(this).is(':checked')) {
        var m = $(this).attr('media');
        var mid = 'verify_' + m;
        $(this).parents('div.state-container')
            .find('ul.' + mid)
            .remove();
        $(this).attr('checked', false);
    } else {
        var url = AJAX_URL;
        var that = this;
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            success: function(data) {
                $(that).parents('li')
                    .siblings('li.verification')
                    .children('div.media-verification')
                    .append(data)
                    .fadeIn(500);
                $(that).attr('checked', true);
            }
        }); 
    }
    return false;

});

Answer 3

尝试使用e.stopPropagation()代替e.preventDefault()，同时删除return false。在jQuery中返回false相当于e.stopPropagation() + e.preventDefault()。 e.preventDefault()会阻止该复选框为checked。

Answer 4

这似乎是由于异步请求。在成功回调激活之前，执行过了$.ajax。当您再次单击该复选框时，前一个请求的回调尚未更新其状态。您可以尝试在触发ajax调用之前禁用复选框控件，并在成功回调中再次启用它：

that.attr("disabled", "disabled");
var url = AJAX_URL;   
$.ajax({
    type: 'GET',
    url: url,
    dataType: 'html',
    success: function(data){

        that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500);
        that.attr('checked', 'checked');
        that.removeAttr('disabled');
    }
});

这将确保连续两次点击不会导致不可预测的行为。另一种方法是使用同步请求，即async: false，但这将阻止整个浏览器的持续时间。

Answer 5

我认为这是由于IE中的一个奇怪的错误。检查/设置属性 defaultChecked 以及已选中。在if条件下尝试这个，

if (that.attr('checked')=='checked' || that.attr("defaultChecked")=='checked'){     
      var m = that.attr('media');  
      var mid = 'verify_' + m;
      that.parents('div.state-container').find('ul.' + mid).remove();
      that.attr('checked', false);
      that.attr('defaultChecked', false); 
} else {

Answer 6

这可能只是部分答案，但在您的测试中，$(this).attr('checked')如果选中则会返回true，如果没有，则返回false。所以只需将条件更改为if (that.attr('checked'))

即可

jQuery / Javascript：单击复选框上的事件和“已检查”属性

6 个答案: