Question

我为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

Answer 1

这是因为您正在使用attr()而非prop()，只更改属性而不更改基础属性，将其更改为

checkbox.prop('checked', true);

FIDDLE

Answer 2

使用.prop()代替.attr()

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

Demo

Answer 3

使用以下代码，我已经在你的小提琴例子中尝试过它，

checkbox.prop('checked', true);

希望这有帮助！

jQuery插件 - 奇怪的点击行为

3 个答案:

Demo