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

button widget error on disabled element

本文关键字：小部 错误 按钮 元素      更新时间：2023-09-26

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

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>

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

知道是什么原因造成的吗？

这是一把小提琴在演示这个问题。

由于它已经创建，您需要首先删除按钮，执行类似"

    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"); 
            });
        });
    }

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

value.button("refresh");

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

相关文章：