jQueryUI 按钮集 CSS 问题

Question

我有一组复选框，我将它们与按钮集一起使用，使它们看起来像按钮

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

我想要的是，当用户单击按钮以便更改按钮下的复选框时，颜色将在本例中更改为红色。

我已经尝试了几个小时，但没有成功，谷歌也没有提供太多帮助。

谢谢

Answer 1

您当前的代码正在将红色文本颜色添加到隐藏的复选框元素，而不是样式化的 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