JQuery UI button - how to change the style and selected buttons?

Question

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.date').datepicker($.datepicker.regional['cs']);
        $(".votePollState").button({ icons: {primary:'ui-icon-closethick'},text: false });
    });
</script>

HTML code:

<input type="checkbox" class="votePollState" id="point-1"/><label for="point-1">Choice 1</label>

<input type="checkbox" class="votePollState" id="point-1"/><label for="point-1">Choice 1</label>

I need to set some icons for the state of the checkbox, the checkbox of the checked checkbox is not checked, and the checkmark is checked. No, if I checked, it has an icon, but just change the border color.

Something uses the ON / OF button on the iPhone.

THX

Answer 1

You can add a handler .change()that took .checkedand assigned an icon based on it, for example:

$(".votePollState").button({ 
    icons: {primary:'ui-icon-closethick'},
    text: false 
}).change(function() {
    $(this).button("option", { 
        icons: { primary: this.checked ? 'ui-icon-check' : 'ui-icon-closethick' }
    });
});

You can check it out here .