jquery - jQuery UI 单选按钮 - 每个选择的颜色不同？

Question

我正在使用带有Aristo主题的 jQuery UI 单选按钮，它们非常棒。

问题是，我有两个带有两个选项的单选按钮，“批准”和“拒绝” - 如果选择了批准，我希望按钮为蓝色，这就是目前的情况，这很棒。但是，如果我选择“拒绝”，我希望按钮变为红色（并批准变为灰色，因为它确实如此）

这是我的 HTML：

<div id="toggle">
    <input type="radio" id="approve" name="approved" checked /><label for="approve">Approve</label>
    <input type="radio" id="reject" name="approved" /><label for="reject">Reject</label>
</div>

还有我的 CSS：

#reject .ui-button.ui-state-focus {
    background: url(images/bg_red.png) repeat-x;
    font-size: 200%;
}

CSS 根本不针对标签，我猜是因为它是由 jQuery UI 创建的叠加层，所以很长，但是有没有办法根据选择来改变颜色？

谢谢！

Answer 1

你可以这样做

$('#approve').change(function(){
   if($(this).is(':checked'))
   {
      $(this).addClass('blue');
      $('#reject').removeClass('red');
   }
});

$('#reject').change(function(){
   if($(this).is(':checked'))
   {
      $(this).addClass('red');
      $('#approve').removeClass('blue');
   }
});