Question

I’m not sure how to setup the User Interface for the following scenario:

Are you available for 5:00 or 6:30, or
both? And if both, do you prefer one over the
other?

So far, I’ve got two groups of radio buttons, but I’m stuck on the “do you prefer one over the other” scenario. I’m thinking if they hold down the YES radio button, then it changes color or something to denote that they are not only available for that choice, but that they prefer that choice as well.

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <legend>5:00</legend>
            <input type="radio" name="Avail500" id="Avail500_0" value="0">
            <label for="Avail500_0">No</label>
            <input type="radio" name="Avail500" id="Avail500_1" value="1">
            <label for="Avail500_1">Yes</label>
        </fieldset>
    </div>
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <legend>6:30</legend>
            <input type="radio" name="Avail630" id="Avail630_0" value="0">
            <label for="Avail630_0">No</label>
            <input type="radio" name="Avail630" id="Avail630_1" value="1">
            <label for="Avail630_1">Yes</label>
        </fieldset>
    </div>      

Since mobile is a new mindset, I thought I should ask Stackoverflow instead of make up my own user interface.

Answer 1

Live Example:

• http://jsfiddle.net/CMJ8K/ (Using Checkboxes)
• http://jsfiddle.net/CMJ8K/10/ (Dual options)

HTML:

<div data-role="page" id="jqm-home" class="type-home"> 
    <div data-role="content"> 
        <div  data-role="fieldcontain"> 
             <fieldset data-role="controlgroup"> 
                <legend>Select Available Times:</legend> 
                <input type="checkbox" name="Avail500" id="Avail500" class="custom" /> 
                <label for="Avail500">5:00</label>
                <input type="checkbox" name="Avail630" id="Avail630" class="custom" /> 
                <label for="Avail630">6:30</label> 
                <input type="checkbox" name="Avail930" id="Avail930" class="custom" /> 
                <label for="Avail930">9:30</label>
            </fieldset> 
        </div> 
    </div>
</div>

Another plus is that is uses a lot less code