jquery grouped buttons change appearance after click

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!

score 1 · Accepted Answer · answered Jul 19 '11 at 07:43

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

answered Jul 19 '11 at 07:43

vinceh

3,490
1
21
24

thanks a lot man! your code works perfectly. i tried to use it and it sure works but the problem is after clicking coffee then water, the design of the coffee button wasnt changed (it stays disabled) but it can be clicked. btw, im using jquery mobile. i dont know if this is a bug or something – Chinchan Zu Jul 19 '11 at 08:00
Maybe you can refer to [this](http://stackoverflow.com/questions/5875025/disable-buttons-in-jquery-mobile) for your second problem. I've never used jQuery mobile so I can't be of much help :) – vinceh Jul 19 '11 at 08:14

Pehmolelu · Answer 2 · 2011-07-19T07:54:14.460

0

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);
    });
});

edited Jul 19 '11 at 07:54

answered Jul 19 '11 at 07:37

Pehmolelu

3,534
2
26
31

thanks for your reply but like what i said. i want to assign an image on them... (for button coffee a coffee image)... if i use radio button i cant assign image on them so i used buttons – Chinchan Zu Jul 19 '11 at 07:41
hi! thanks for this. i tried it and unfortunately the buttons stayed disabled after clicking them. and u did mentioned about changing the icons... will u be kind enough to teach me how to do that? – Chinchan Zu Jul 19 '11 at 08:15
Hi, yea just noticed that if the button is disabled it cannot launch any events, which is why it cant turn back because it doesn't recognize the click. But about the icon: $( ".selector" ).button({ icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} }); You just give them a class. – Pehmolelu Jul 19 '11 at 12:10

jquery grouped buttons change appearance after click

2 Answers2