CODEWITHSUNDEEP
javascriptjqueryjquery-uiuibuttonjquery-mobile
Chinchan Zu
Chinchan Zu

Reputation: 918

jquery grouped buttons change appearance after click

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!

Upvotes: 0

Views: 1051

Answers (2)

Pehmolelu
Pehmolelu

Reputation: 3564

http://jqueryui.com/demos/button/#radio

I think this is what you are searching for :)

You can use icons option to set icons for them.

EDIT: Here is alternative solution then :)

$(function() {
    $('#ui-26 > .ui-segment > input').click(function(){
        if($(this).is(':disabled')) return;
        $('#ui-26 > .ui-segment > input').prop('disabled',false);
        $(this).prop('disabled',true);
    });
});

Upvotes: 0

vinceh
vinceh

Reputation: 3510

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).

Upvotes: 1

Related Questions