Плагин jQuery - Странное поведение клика

Question

Плагин jQuery - Странное поведение клика

0

Я написал короткий плагин для jQuery, который изменит стили встроенного флажка браузера, чтобы он лучше соответствовал теме.

Вот код плагина:

(function ($) {

    $.fn.checkbox = function()
    {
        var uiBox = $('<span class="ui-checkbox" />'),
            that = this;

        uiBox.data('checkbox', this).insertAfter(this);
        this.hide();

        if(this.is(':disabled')) { uiBox.addClass('disabled'); }
        if(this.is(':checked')) { uiBox.addClass('checked'); }

        if(!uiBox.hasClass('disabled'))
        {
            uiBox.on('click', function() {
                var checkbox = $(this).data('checkbox');

                if(checkbox.is(':checked'))
                {
                    uiBox.removeClass('checked');
                    checkbox.attr('checked', false);
                }
                else
                {
                    uiBox.addClass('checked');
                    checkbox.attr('checked', 'checked');
                }
            });
        }
    };

} (jQuery));

Затем этот код вызывается через обработчик DOMReady, используя:

$('input[type="checkbox"].ui').checkbox();

Все работает в первые три раза, когда нажимается флажок, но по какой-то причине код больше не выполняет добавление/удаление необходимых классов, а исходный флажок никогда не обновляется. Может ли кто-нибудь пролить свет на ситуацию и объяснить, почему это происходит?

jsFiddle Demo

BenM 23 май 2014, в 10:34

Источник

Теги:

javascript

jquery

3 ответа

1

Используйте .prop() вместо .attr()

 checkbox.prop('checked', 'checked');

демонстрация

Dhaval Marthak 23 май 2014, в 05:35

-1

Используйте этот следующий код, я попробовал его в своем примере скрипта, он работает там,

checkbox.prop('checked', true);

Надеюсь это поможет!

NITRAM 23 май 2014, в 06:29

Ещё вопросы

adeneo · Accepted Answer · 2014-05-23T05-21-00.000Z

Это потому, что вы используете attr() а не prop(), изменяя только атрибут, а не базовое свойство, измените его на

checkbox.prop('checked', true);

FIDDLE

Благодарю. Почему attr() работает для первых трех кликов?
Он изменяет атрибут, поэтому измененное состояние изменяется, но при следующем щелчке jQuery проверяет свойство, а не атрибут, а затем свойство не совпадает с атрибутом и перестает работать.