jqueryグループ化されたボタンは、クリック後の外観が変更されます

Question

jquery mobileで3つのボタンを作ったとします（コーヒー、コーラ、水）を水平にグループ化して、クリックしたときのように振る舞います外観をクリックした状態にして、もう一度クリックすることはできません（ボタンを無効にすると、その色もグレーに変わります）。コーラをクリックすると、コーヒーは正常に戻り、コーラはクリックされた状態になります。

<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

私は、これはあなたが彼らのためにアイコンを設定するアイコンオプションを使用することができます:)

探しているものだと思います。

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