jquery - 如何让可选择的行为像单选按钮？

Question

我喜欢这种可以设置样式的方式，但我讨厌用户能够使用此界面选择多个项目。有没有办法

1. 修改可选示例以仅允许单个选择，或
2. 修改这样的标准单选按钮示例，使其看起来更像可选示例？

Answer 1

您可以使用您想要的任何 html 按钮制作类似的 UI，而无需使用selectable.

示例 HTML：

<div>One: <input type="radio" name="rad"/> Two: <input type="radio" name="rad"/> Three: <input type="radio" name="rad"/></div>
<ul id="rad_buttons">
  <li>Radio 1</li> 
  <li>Radio 2</li>   
    <li>Radio 3</li>   
</ul> 

JS：

var $radios=$('input[name="rad"]');
$('#rad_buttons li').click(function(){
  $('#rad_buttons li.active').removeClass('active')
  var $btn=$(this).addClass('active'), idx=$btn.index();
  $radios.eq( idx).prop('checked',true)
})

演示：http: //jsfiddle.net/aDFr8/