如何使用jQuery 1.11+获取垂直单选按钮？

Question

我想获得this answered question中的垂直单选按钮集。不幸的是，这个解决方案对我来说在jQuery的最新版本（1.11.0）中不起作用。 （在我的网站上测试过，jsFiddle用1.11.0测试）

如果我尝试将该代码实现到我的网站中，那么其他UI元素（如滑块）将无法正确加载。

有没有办法修复该代码或是否有其他垂直单选按钮集解决方案？

---

吃代码！ （jsFiddle）

<h2> Radio Buttonset </h2>
<div id="radio">
  <input type="radio" id="radio1" name="radio" value="1"/><label for="radio1">Choice 1</label>
  <input type="radio" id="radio2" name="radio" value="2"/><label for="radio2">Choice 2</label>
  <input type="radio" id="radio3" name="radio" value="3"/><label for="radio3">Choice 3</label>
</div>
<h2> Checkbox Buttonset </h2>
<div id="checkbox">
  <input type="checkbox" id="check1" name="check" value="1"/><label for="check1">Choice 1</label>
  <input type="checkbox" id="check2" name="check" value="2"/><label for="check2">Choice 2</label>
  <input type="checkbox" id="check3" name="check" value="3"/><label for="check3">Choice 3</label>
</div>

---

(function( $ ){
//plugin buttonset vertical
$.fn.buttonsetv = function() {
  $(':radio, :checkbox', this).wrap('<div style="margin: 1px"/>');
  $(this).buttonset();
  $('label:first', this).removeClass('ui-corner-left').addClass('ui-corner-top');
  $('label:last', this).removeClass('ui-corner-right').addClass('ui-corner-bottom');
  mw = 0; // max witdh
  $('label', this).each(function(index){
     w = $(this).width();
     if (w > mw) mw = w; 
  })
  $('label', this).each(function(index){
    $(this).width(mw);
  })
};
})( jQuery );

$(document).ready(function(){
    //call plugin 
    $("#radio").buttonsetv();
    $("#checkbox").buttonsetv();
});

---

---

---

例如，我尝试在另一个jQuery手风琴中初始化这些垂直无线电。我有一些HTML，然后在这个手风琴里面我放置了滑块和水平单选按钮组。

在那之后，我将JavaScript放置以创建滑块和无线电。滑块初始化良好，无线电仍然是标准的单选按钮。

在我的HTML

之后

$(function() {
    $( "#slider-anzteil" ).slider({
        range: "min",
        value: 1,
        min: 1,
        max: 4,
        slide: function( event, ui ) {
            $( "#anzteil" ).val( "" + ui.value );
        }
    });
    $( "#anzteil" ).val( "" + $( "#slider-anzteil" ).slider( "value" ) );
});

$(document).ready(function(){
    //call plugin 
    $("#radio").buttonsetv();
    $("#checkbox").buttonsetv();
});

那就是它的样子：

为了完成，我的：

<link href="jQuery/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="css/open2014.css" type="text/css"> <!-- only references to body and table font styles -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="jQuery/horizontal-plugin.js"></script> <!-- the code block with the horizontal script in it -->