需要jQueryUI的，以顯示不同的圖像進行多種選擇

Question

我有一個客戶端是要求單選按鈕以綠，黃，紅，藍（N/A）的選擇。我有jQueryUI工作正常，但顯然它只顯示基本顏色，並單擊時不同的顏色。

我想每個單選按鈕默認加載爲灰色，然後變成綠色，如果你選擇第一個單選按鈕，黃色的，如果你選擇第二個，依此類推。

爲了這一點變得更加複雜，我申請到一個.NET單選按鈕列表。 這裏的生成代碼：

<div id="radio" class="ui-buttonset"> 
    <table border="0" id="ctl00_ContentPlaceHolder1_rdoGreet1"> 
<tbody> 
     <tr> 
<td><input type="radio" value="2" name="ctl00$ContentPlaceHolder1$rdoGreet1" id="ctl00_ContentPlaceHolder1_rdoGreet1_0" class="ui-helper-hidden-accessible"><label for="ctl00_ContentPlaceHolder1_rdoGreet1_0" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">GREEN</span></label></td> 
<td><input type="radio" value="1" name="ctl00$ContentPlaceHolder1$rdoGreet1" id="ctl00_ContentPlaceHolder1_rdoGreet1_1" class="ui-helper-hidden-accessible"><label for="ctl00_ContentPlaceHolder1_rdoGreet1_1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">YELLOW</span></label></td> 
<td><input type="radio" value="0" name="ctl00$ContentPlaceHolder1$rdoGreet1" id="ctl00_ContentPlaceHolder1_rdoGreet1_2" class="ui-helper-hidden-accessible"><label for="ctl00_ContentPlaceHolder1_rdoGreet1_2" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-state-active" role="button" aria-disabled="false"><span class="ui-button-text">RED</span></label></td><td><input type="radio" value="-1" name="ctl00$ContentPlaceHolder1$rdoGreet1" id="ctl00_ContentPlaceHolder1_rdoGreet1_3" class="ui-helper-hidden-accessible"><label for="ctl00_ContentPlaceHolder1_rdoGreet1_3" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" aria-pressed="false" role="button" aria-disabled="false"><span class="ui-button-text">N/A</span></label></td> 
    </tr> 
</tbody></table> 
</div> 

Answer 1

爲什麼不直接覆蓋相應的CSS？例如，http://jsfiddle.net/william/VBGUt/。