Vertical Radio as buttons

by Erik Zanker

HTML

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div data-role="content">
<form>
<fieldset data-role="controlgroup" data-mini="true" class="vertBackground">
    <legend>Vertical, mini sized:</legend>
    <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6a" value="on" checked="checked" />
    <label for="radio-choice-v-6a">One</label>
        <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6b" value="off" />
    <label for="radio-choice-v-6b">Two</label>
        <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6c" value="other" />
    <label for="radio-choice-v-6c">Three</label>
</fieldset>
</form>       
        
        <form>
<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal:</legend>
    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked">
    <label for="radio-choice-h-2a">One</label>
    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off">
    <label for="radio-choice-h-2b">Two</label>
    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other">
    <label for="radio-choice-h-2c">Three</label>
</fieldset>
</form>
    </div>
    <div data-role="footer">
        
    </div>
</div>

CSS

.vertBackground .ui-icon{
    display: none;
}
.vertBackground .ui-btn-inner{
    padding-left: 11px !important;
}

JavaScript

$(document).on("pageinit", "#page1", function(){
    SetActive();
    
    $(".vertBackground input[type='radio']").on("change", function(){
        setTimeout(SetActive, 0);        
    });
});

function SetActive(){
    $(".vertBackground .ui-radio-off").removeClass("ui-btn-active");
    $(".vertBackground .ui-radio-on").addClass("ui-btn-active");    
}