Question

i made 3 buttons in jquery mobile lets say (coffee, cola, water) grouped horizontally, I want them to behave like when I click one of them (coffee) the clicked button will change its appearance to clicked state and I wont be able to click it again (take note that when I disable a button it changes its color to gray also). then when i click cola, coffee returns to normal and cola turns to clicked state.

<div id="ui-26">
<div class="ui-segment" data-role="controlgroup" data-type="horizontal" >
    <input type="button" name="segment-coffee" id="segment-coffee" class="custom" value="coffee" />
    <input type="button" name="segment-cola" id="segment-cola" class="custom" value="cola" />
    <input type="button" name="segment-water" id="segment-water" class="custom" value="water" />
</div>
</div>

i tried using the radio button but i cant assign a background image on it so i decided to use grouped buttons. how should this be done on jquery? thanks in advance!

Answer 1

I think http://jsfiddle.net/rcNfJ/2/ is what you are looking for? I just used attr("disabled") but you can do whatever you want to them (change their css, manipulate data, etc).