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

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

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

Собственно, вопрос: почему это так?
  • Вопрос задан
  • 57256 просмотров
Решения вопроса 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 для чайников», написанных школьниками, а читайте официальную документацию или хотя бы книги от нормальных авторов, разбирающихся в предмете. Конечно, спецификация не ответит вам на любой вопрос, но она хотя бы даст отправную точку для поиска ответа.
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
Mithgol
@Mithgol
Используйте $(…).prop("checked", true) и тем невозбранно достигнете желаемого.
Ответ написан
@mayorovp
Потому что надо делать вот так: jsfiddle.net/abZLf/2/
или вот так: jsfiddle.net/abZLf/3/

Атрибут checked отвечает только за начальное состояние чекбокса, за текущее состояние отвечает свойство.
Ответ написан
ogarich89
@ogarich89
Front-End Developer
$('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');
          };
        });
Ответ написан
Для старых версий 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");
            }
        });
Ответ написан
@wdtime_ru
Возможно стоит подробнее почитать про метод jQuery attr и стилизацию чекбоксов, средствами плагина jQuery checkbox
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы