Javascript jQuery插件-奇怪的点击行为

我已经为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));

在单击“复选框”的前三次时，一切都正常，但由于某种原因，代码不再执行必要类的添加/删除，并且原始复选框永远不会更新。有人能解释一下情况，并解释为什么会发生这种情况吗

---

这是因为您使用的是

attr（）

而不是

prop（）

，只更改属性而不是基础属性，将其更改为

checkbox.prop('checked', true);

使用

.prop（）

而不是

.attr（）

---

使用下面的代码，我在你的小提琴示例中尝试过它，它在那里工作

checkbox.prop（'checked'，true）

希望这有帮助
 谢谢。但是，
attr（）
为什么会在前三次单击中起作用呢？它会更改属性，因此选中的状态会更改，但在下一次单击时，jQuery会检查属性而不是属性，然后属性与属性不同，并且停止工作。
checkbox.prop('checked', true);

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