jQueryUI Buttonset CSS issue

Question

I have a set of Checkboxes that I am using with a Buttonset to make them look like buttons

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

And

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

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

What I want is that when the user clicks the button so that the checkbox under the button is changed the color will change in this case to red.

I have been trying for hours and no luck and google is not helping much either.

Thanks

Answer 1

Your current code is adding the text color of red to the hidden checkbox elements and not the styled jQuery UI buttonset.

You can override jQuery UI's default style for active buttons in your list using just CSS.

JS

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

CSS

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

jsfiddle

Update:

Based on your comments it sounds like you want to use .each() to iterate over the items instead of using CSS. You can do that by selecting the correct items and adjusting the styles in 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