Question

我为jquery编写了一个插件，它将jquery ui按钮小部件样式应用于复选框（基于this answer）。

function checkbox() {
    $.each($(".inp-checkbox"), function(index, value) {
        $("label[for='" + $(value).attr('id') + "']").remove();

        $(value).prop({"type": "checkbox" })
            .val(false)
            .after($("<label />").attr({ for: $(value).prop('id')}))
            .button({text: false })
            .click(function (e) {
               alert("hello"); 
        });
    });
}

在大多数情况下，这与预期一样有效。但是，我发现当我第二次调用该函数时（如果我已启用或禁用它，则需要重新创建该复选框），按钮标签未正确创建。

标签标记应该如下所示（并且第一次“按钮”复选框时出现：

<label for="chkTesting" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true">
    <span class="ui-button-text"></span>
</label>

然而在第二次运行后，它看起来是这样的：

<label for="chkTesting"></label>

我在创建新标签之前添加了一些代码来删除旧标签，但没有区别。据我所知，代码中没有语法错误或异常。

知道可能导致这种情况的原因吗？

Here's a fiddle demonstrating the problem.

Answer 1

因为它已经创建，所以你需要先删除按钮，然后执行“

”之类的操作

    function checkbox() {
$(".inp-checkbox").after.button('remove');
        $.each($(".inp-checkbox"), function(index, value) {
            $(value).prop({"type": "checkbox" })
                .val(false)
                .after($("<label />").attr({ for: $(value).prop('id')}))
                .button({text: false })
                .click(function (e) {
                   alert("hello"); 
            });
        });
    }

Answer 2

在阅读JQuery UI Button API docs之后，我意识到我可以使用“按钮”小部件的“刷新”功能来刷新复选框（也就是按钮）的视觉外观，而无需重新创建按钮

value.button("refresh");

这很好用，我肯定会先下次检查API文档：P

禁用元素上的按钮小部件错误

2 个答案: