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

【问题标题】：button widget error on disabled element禁用元素上的按钮小部件错误
【发布时间】：2013-08-29 18:33:04
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html jquery-ui

【解决方案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"); 
            });
        });
    }

【讨论】：

我试过了，但得到Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'remove':jsfiddle.net/Mansfield/JE7FE/17
好的，然后检查按钮是否存在stackoverflow.com/questions/15763909/…
我需要重新生成按钮，因为默认情况下它是禁用的（在这种特殊情况下）。我不想手动重新绑定事件、删除一堆属性、更改类等等……如果我不需要的话。

【解决方案2】：

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

value.button("refresh");

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

【讨论】：