我正在尝试动态地将jQuery移动无线电转换为垂直堆叠的无线电。我有这个。
$('fieldset').data('type', 'vertical').controlgroup('refresh');
这不应该将所有数据类型=“水平”更改为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>
答案 0 :(得分:4)
我通常用来改变应用于控制组和单选按钮的样式,只要我需要从水平变为垂直,反之亦然。以下是代码,希望这符合您的要求。
$("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"> </span>'));
});
//Set the first one as checked by default.
$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");