將jQuery Mobile收音機從水平轉換爲垂直

Question

我試圖將jQuery移動收音機動態地轉換爲垂直堆疊的收音機。我有這個。

$('fieldset').data('type', 'vertical').controlgroup('refresh'); 

這應該不會改變所有data-type =「horizo​​ntal」到data-type =「vertical」嗎？即使當我檢查它時，我也沒有看到任何改變。我也在表格上用觸發器（'創建'）玩過，這隻會讓收音機失去作用。

<div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup" data-type="horizontal"> 
     <input type="radio" name="gender" id="male" value="male" class="required" checked /> 
     <label for="male">Male</label> 
     <input type="radio" name="gender" id="female" value="female" class="required" /> 
     <label for="female">Female</label> 
    </fieldset> 
</div> 

Answer 1

我一般使用以改變施加到controlgroup和單選按鈕的樣式每當我需要從水平改變爲垂直或反之亦然。以下是代碼，希望這符合您的要求。

$("fieldset").attr('data-type','vertical').removeClass('ui-controlgroup-horizontal').addClass('ui-controlgroup-vertical'); 

var $firstLbl = $("fieldset").find('div.ui-radio:first').children('label'), 
    $secondLbl = $("fieldset").find('div.ui-radio:last').children('label'); 

    $firstLbl.removeClass('ui-corner-left').addClass('ui-corner-top'); 
    $firstLbl.children('span').removeClass('ui-corner-left').addClass('ui-corner-top'); 
    $secondLbl.removeClass('ui-corner-right').addClass('ui-corner-bottom'); 
    $secondLbl.children('span').removeClass('ui-corner-right').addClass('ui-corner-bottom'); 

    //show the radio buttons. 
    $("input[type='radio']").each(function(i) { 
     var $self = $(this); 
     $self.next().addClass('ui-btn-icon-left').find('span.ui-btn-text').after($('<span class="ui-icon ui-icon-shadow ui-icon-radio-off">&nbsp;</span>')); 
    }); 

    //Set the first one as checked by default. 
    $("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");