3

ボタンセットで使用してボタンのように見せるためのチェックボックスのセットがあります

<div id="ButtonList">

    <input type="checkbox" id='Check0' value="true" /><label for="Check0">0000</label>
    <input type="checkbox" id='check1' value='false' /><label for="check1">0100</label>
    <input type="checkbox" id='check2' value='true' /><label for="check2">0200</label>
    <input type="checkbox" id='check3' value='false' /><label for="check3">0300</label>

</div>

と

$('#ButtonList').buttonset();

$('#ButtonList input[type=checkbox]').change(function () {
    $(this).css("color", "red");
});

私が欲しいのは、ユーザーがボタンをクリックしてボタンの下のチェックボックスを変更すると、この場合は色が赤に変わることです。

私は何時間も努力してきましたが、運がなく、グーグルもあまり役に立ちません。

ありがとう

4

1 に答える 1

5

現在のコードは、スタイル付きの jQuery UI ボタン​​セットではなく、非表示のチェックボックス要素に赤のテキスト色を追加しています。

CSS だけを使用して、リスト内のアクティブなボタンの jQuery UI のデフォルト スタイルをオーバーライドできます。

JS

$('#ButtonList').buttonset();

CSS

#ButtonList .ui-button.ui-state-active .ui-button-text {
    color: red;
    background-color: pink;
}

jsfiddle

アップデート：

.each()あなたのコメントに基づいて、 CSS を使用する代わりにアイテムを反復処理するために使用したいようです。これを行うには、正しいアイテムを選択し、JS でスタイルを調整します。

$('#ButtonList input[type=checkbox]').change(function () {
    var jquiButtonLabel = $(this).next('.ui-button');
    var jquiButtonText = jquiButtonLabel.children('.ui-button-text');
    if (jquiButtonLabel.hasClass('ui-state-active')) {
        jquiButtonText.css({
            'color': 'red',
            'background-color': 'pink'
        });
    } else {
        jquiButtonText.css({
            'color': '',
            'background-color': ''
        });
    }
});

jsfiddle

于 2013-02-20T22:47:18.947 に答える