$(...).attr('checked', 'checked') не работает?

Question

[ertaquo]

Заметил странный баг с чекбоксами в jQuery (а может, и в самом Chrome?) Даже не знаю, как толком описать этот баг, поэтому вот: jsfiddle.net/abZLf. Группа first срабатывает только один раз, после чего выделять чекбоксы отказывается (но снимать — снимает). В группе second, написанной не в стиле jQuery, все работает нормально.

Проверялось на Chrome 24 и Firefox 18 (ОС — Kubuntu 12.10).

Собственно, вопрос: почему это так?

Answer 1

[egorinsk]

Не уверен, что это баг.

Вы неправильно используете Jquery и Javascript. Функция attr ( api.jquery.com/attr/ ) предназначена для изменения HTML-аттрибута элемента, а не изменения состояния чекбокса. Если вы хотите снять/установить галочку, есть определенный в стандарте DOM способ ( www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-30233917 ):

> checked of type boolean
> When the type attribute of the element has the value «radio» or «checkbox», this represents the current state of the form control, in an interactive user agent. Changes to this attribute change the state of the form control, but do not change the value of the HTML checked attribute of the INPUT element.

Поскольку других способов поменять сосотояние чекбокса в спецификациях HTML и DOM не указано, это значит, что единственный официальный способ — использовать свойство checked у DOM-объекта…

Очевидно, что некоторые браузеры переносят манипуляции с аттрибутами на чекбокс. Но это очень хлипкий и ненадежный способ и не всегда работает. Видимо, делая remoevAttr, вы что-то ломаете. Чтобы проверить, установлена ли галочка, пишите:

if ($element[0].checked)

Чтобы установить состояние чекбокса, пишите:

$element[0].checked = true;

Также могу дать совет, не читайте перед обедом советск^W статей с Хабра вроде «jQuery для чайников», написанных школьниками, а читайте официальную документацию или хотя бы книги от нормальных авторов, разбирающихся в предмете. Конечно, спецификация не ответит вам на любой вопрос, но она хотя бы даст отправную точку для поиска ответа.

Comments

[EugeneOZ]

ejohn.org/blog/jquery-16-and-attr/ — автор вроде ничё так :)

[egorinsk]

John Resig в статье как раз упоминает prop() и проблему с методом attr().

А упомянутый автором вопроса код как раз показывает, как вредно полагаться на «магию», которую делает jQuery, и насколько проще и быстрее использовать DOM свойства, чем искать баги в своем коде или использовании jQuery. Я и более интересные побочные эффекты встречал.

[EugeneOZ]

stackoverflow.com/a/5876747/680786 — вот ещё довольно подробное объяснение

[gro]

вредно полагаться на «магию», которую делает jQuery

Причём тут бедный jQuery? И на голом DOM люди делали аналогично — el.setAttribute('checked', 'checked') и также удивлялись, почему не работат.

[egorinsk]

Магия в том, что ты менякшь аттрибут через attr, а jQuery внутри себя подменяет некоторые (но не все) обращения к аттрибуту на обращение к свойству, это срабатывает, и намекает разработчику (который не знает про разницу между свойствами и аттрибутами), что он поступил правильно.

Жаль, что они не рискнули полночтью сломать функцию attr(), как хотели, и вынуждены и дальше тянуть костыли. Именно то, что jQuery делает за кадром гораздо больше того, о чем его просят (добавление оберток в DOM-дерево, иногда ломающее верстку или логику скриптов, вызывающую перезагрузку ифреймов, игры с объектом события, исполнение кода тегов script в ф-и html()), мне всегда в нем не нравилось, так как это вызывает трудно уловимые баги и побочные эффекты. Странно, кстати, не видел статей на эту тему, неужели один я с ними сталкивался?

[MT]

jquery.com/upgrade-guide/1.9/#attr-versus-prop-

Answer 2

[Mithgol]

Используйте $(…).prop("checked", true) — и тем невозбранно достигнете желаемого.

Comments

[fenric]

@Mithgol Огромнейшее спасибо, мне очень помогли!

[jonston]

Благодарю Тебя о великий кодер!Ты мне очень помог!

[Khripunov]

в новой версии JQuery свойства элементов отделены от их атрибутов. Для доступа к атрибутам остался метод .attr(), а для доступа к свойствам элемента, которые могут меняться динамически (значения атрибутов при этом не меняются), теперь нужно пользоваться .prop(). Спасибо Mithgol за ответ!

[Michael Peteichuk]

Спасибо за ответ!

Answer 3

[mayorovp]

Потому что надо делать вот так: jsfiddle.net/abZLf/2/
или вот так: jsfiddle.net/abZLf/3/

Атрибут checked отвечает только за начальное состояние чекбокса, за текущее состояние отвечает свойство.

Comments

[EugeneOZ]

А разве искать элемент по #id не быстрее, чем по.классу?

[mayorovp]

При чем тут поиск по id и по классу?
Вопрос был совсем в другом.

[EugeneOZ]

Да, сорри, это у автора так.

Answer 4

[Роман Огарков]

$('input[type="checkbox"]').click(function() {
          var inputCheck = $('input[type="checkbox"]').prop("checked");
          if (inputCheck == false) {
            $('.input-row').css('display', 'none');
          } else if(inputCheck == true){
            $('.input-row').css('display', 'block');
          };
        });

Answer 5

[Алексей Фирсов]

Для старых версий jQuery в которых нету prop и используется $(...).attr('checked', true) проблемы могут возникнуть в ie при использование метода change лечится это так

jQuery.fn.extend({
            fire: function(evttype){
                el = this.get(0);
                if (document.createEvent) {
                    var evt = document.createEvent('HTMLEvents');
                    evt.initEvent(evttype, false, false);
                    el.dispatchEvent(evt);
                } else if (document.createEventObject) {
                    el.fireEvent('on' + evttype);
                }
                return this;
            }
        });

        $("form :checkbox").click(function(){
            if($.browser.msie){
                $(this).fire("change");
            }
        });

Answer 6

[wdtime_ru]

Возможно стоит подробнее почитать про метод jQuery attr и стилизацию чекбоксов, средствами плагина jQuery checkbox

Comments

[ertaquo]

Боже, этот вопрос я задавал полтора года назад, и на него уже есть ответ...

[wdtime_ru]

ertaquo: пища для размышлений для тех, кто будет искать информацию, спасибо.