Question

我有一组Checkbox，我使用Buttonset使它们看起来像按钮

<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

jQueryUI Buttonset CSS问题

1 个答案: