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/