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

Are you trying to change the style of the buttons, or the style of the checkboxes that are hidden by the buttons? Your current code is adding the text color of red to the hidden checkbox elements. — Ruben Infante
– Ruben Infante, Commented Feb 20, 2013 at 22:40

Ruben Infante · Accepted Answer · 2013-02-20 23:24:36Z

5

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

edited Feb 20, 2013 at 23:24

answered Feb 20, 2013 at 22:47

Ruben Infante

3,1351 gold badge19 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Clifford Agius Over a year ago

Thanks that makes sense now and yes I know I could add it with CSS but I wanted to control other elements of the button for each button that is added to the group so CSS was not an option.

Clifford Agius Over a year ago

Out of interest is there a way to control the CSS or group of the buttons without CSS styling so what I am trying but without the CSS like your jsfiddle?

Ruben Infante Over a year ago

@CliffordAgius I added an alternative solution based on your comments.

Clifford Agius Over a year ago

The update is exactly what I needed now I can control the buttons as I need. Thanks

Collectives™ on Stack Overflow

jQueryUI Buttonset CSS issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related