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

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

1 个答案: