JQuery/Javascript: событие Click на флажке и атрибут 'checked'

Код:

$('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'), поэтому я полностью озадачен.

Похоже, что состояние unchecked → checked проверяет исходное состояние, но checked → unchecked does not. Любая помощь?

Ответ 1

B.E., я знаю, что это был год, но я думаю, что нашел решение,

Проблема здесь в том, что событие click на самом деле вызывается и запускается до того, как свойство check проверено на вкладке флажка. Таким образом, функция запускается, смотрит, имеет ли вход атрибут "checked" и запускает условие else. Затем элемент получает свойство "checked".

Я тоже столкнулся с этим, и мое решение состояло в том, чтобы привязать функцию к функции изменения, а не к функции щелчка, поскольку изменение только срабатывает ПОСЛЕ того, как проверенное свойство было обновлено на входе.

Надеюсь, это поможет вам, а если нет, любому другому, кто случайно наткнется на этот пост, столкнувшись с подобной проблемой.

Ответ 2

Ну, ладно. Вы установили событие live, поэтому я думаю, что ваш script также может отвечать на установку его как отмеченного, но я не могу полностью сказать, что вы пытаетесь сделать здесь, не видя разметки, но здесь я переписываю.

$('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;

});

Ответ 3

Попробуйте использовать e.stopPropagation() вместо e.preventDefault(), а также удалите return false. Возврат false в jQuery эквивалентен e.stopPropagation() + e.preventDefault(). e.preventDefault() запрещает флажок checked.

Ответ 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, но который будет блокировать весь браузер для его продолжительности.

Ответ 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 {

Ответ 6

Это, вероятно, только частичный ответ, но в вашем тесте $(this).attr('checked') должен возвращать true, если отмечено, и false, если нет. Поэтому просто измените условное выражение на if (that.attr('checked'))