Кнопки, сгруппированные в jquery, изменяют внешний вид после нажатия

Question

я сделал 3 кнопки в jquery mobile, скажем, (кофе, кола, вода), сгруппированных по горизонтали, я хочу, чтобы они работали так, как если бы я нажимал на одну из них (кофе), нажатая кнопка изменит свой вид на нажатое, ииметь возможность щелкнуть по нему еще раз (обратите внимание, что когда я отключаю кнопку, она также меняет свой цвет на серый).затем, когда я нажимаю колу, кофе возвращается в нормальное состояние, и кола переходит в состояние щелчка.

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

Я попытался использовать переключатель, но не могу назначить фоновое изображение, поэтому решил использовать сгруппированные кнопки.Как это должно быть сделано на JQuery?заранее спасибо!

Answer 1

Я думаю http://jsfiddle.net/rcNfJ/2/ - это то, что вы ищете?Я просто использовал attr("disabled"), но вы можете делать с ними все, что захотите (изменить их CSS, манипулировать данными и т. Д.).

Answer 2

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

Я думаю, это то, что вы ищете :) 1004 *

Вы можете использовать опцию значков для установки значков для них.

EDIT: Вот альтернативное решение тогда:)

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