Question

我有一个客户要求选择绿色，黄色，红色和蓝色（N / A）的单选按钮。我有jQueryUI工作正常，但显然它只显示基色，点击时颜色不同。

我希望每个单选按钮默认加载为灰色，然后如果选择第一个单选按钮则变为绿色，如果选择第二个单选按钮则变为黄色，依此类推。

为了进一步使这一点复杂化，我将它应用于.NET radiobuttonlist。这是生成的代码：

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

需要jQueryUI来显示多个选择的不同图像

1 个答案: