0

jquery uiボタンウィジェットスタイルをチェックボックスに適用するjquery用のプラグインを作成しました（この回答に基づいて）。

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>

しかし、2 回目の実行後は次のようになります。

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

新しいラベルを作成する前に古いラベルを削除するコードを追加しましたが、違いはありませんでした。私が知る限り、コードに構文エラーや例外はありません。

何がこれを引き起こしているのでしょうか？

ここに問題を示すフィドルがあります。

4

2 に答える 2

0

すでに作成されているため、まずボタンを削除して、次のようにする必要があります。」

    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"); 
            });
        });
    }
于 2013-08-29T18:36:55.783 に答える