button widget error on disabled element

Question

I wrote a plugin for jquery which applies the jquery ui button widget styles to checkboxes (based on 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"); 
        });
    });
}

This works just as expected in most cases. However, I'm finding that when I call the function a second time (needing to re-create the checkbox if I've enabled or disabled it), the button label is not being properly created.

The label markup should look like this (and does the first time I "buttonize" the checkbox:

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

Yet after the second run, it looks like so:

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

I added some code to remove the old label before creating the new one, but it made no difference. There are no syntax errors or exceptions in the code as far as I can tell.

Any idea what might be causing this?

Here's a fiddle demonstrating the problem.

Answer 1

since it's already created, you need to first remove the button, do something like"

    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

After some reading of the JQuery UI Button API docs I realized that I could use the "refresh" function of the "button" widget to refresh the visual appearance of the checkbox (aka button) without having to re-create the button.

value.button("refresh");

This worked fine, and I will definitely check the API docs next time first :P