jQueryUI radio button visible

Question

jQuery mobile leaves the radio button visible. Is this possible with jQueryUI without too much effort? Users understand the functionality of a radio button, so I'd prefer to keep that visual recognition.

Answer 1

jQuery

$("#radioSet").buttonset();
$("#radio1").button("option", "icons", { primary: 'ui-icon-check' });
$("#radio2").button("option", "icons", { primary: 'ui-icon-check' });

$("#radioSet input[type=radio]").on("click", function () {
    $("#radioSet input[type=radio]").each(function () {
        if ($(this).is(":checked")) {
            $(this).button("option", "icons", { primary: 'ui-icon-check' });
        } else {
            $(this).button("option", "icons", { primary: 'ui-icon-cancel' });
        }
    });
});

Html

<div id="radioSet">
    <input type="radio" id="radio1" name="radio" checked="checked" />
    <label for="radio1">Radio 1</label>

    <input type="radio" id="radio2" name="radio" />
    <label for="radio2">Radio 2</label>
</div>