jQuery Mobile：单选按钮的两列/三列垂直控制组答案

【问题标题】：jQuery Mobile: Two/three column vertical control group of radio buttonsjQuery Mobile：单选按钮的两列/三列垂直控制组
【发布时间】：2016-02-29 18:30:11
【问题描述】：

我最近一直在使用 jQuery Mobile，并开始遇到各种限制；其中大部分我可以使用某种 jQuery/Javascript/CSS 操作来解决。我们使用了很多 iPad，它们比普通手机更宽。我们页面上的一些输入组倾向于以两列格式看起来更好；尽可能。

一个例子是一长串单选按钮。只有一列看起来很糟糕。我们希望以 2 或 3 列显示单选按钮列表，而不是使用单个“垂直”“控制组”获得的典型 1 列格式。请参阅此演示页面上的垂直控制组：

http://demos.jquerymobile.com/1.4.5/checkboxradio-radio/#Verticalgroup

使用复选框，我通过创建两个或三个不同的控制组，然后将它们放入一个 3 列网格中来实现这一点。这适用于复选框，但我不确定如何使用单选按钮执行此操作。有什么想法吗？

我假设我可以创建三个不同的无线电输入垂直控制组（并排），然后操作 CSS，使其看起来像有一个组。我必须为实际选择的收音机管理一个隐藏的输入。

【问题讨论】：

就我个人而言，我发现使用引导程序为移动设备进行设计是一项更令人愉快的任务
注明。不幸的是，我在这个项目中坚持使用 jQuery Mobile。
你能制作一个 jsFiddle 来显示你为复选框做了什么吗？
对 SO 来说可能不是最好的问题。

标签： php jquery css jquery-mobile

【解决方案1】：

我决定为营销来源创建两个列；右边和左边。名称是“marketing_source_left”和“marketing_source_right”。我填充了两个无线电垂直控制组，然后使用 jQuery 将两者都更改为只有“marketing_source”的“名称”属性。

// Define current marketing_source value and remove hidden field
var marketing_source = $('#marketing_form #marketing_source').val(); // hidden field
$('#marketing_form #marketing_source').val(marketing_source).remove();

// Change all marketing source radios (left and right sides)
// to have property name="marketing_source"
$("#marketing_form input:radio[name='marketing_source_left']").prop('name', 'marketing_source').prop('checked', false);
$("#marketing_form input:radio[name='marketing_source_right']").prop('name', 'marketing_source').prop('checked', false);

// Set the radio to checked for the marketing source value
$('#marketing_form input[type="radio"]:checked').prop('checked', false); // Uncheck current
$('#marketing_form input:radio[name="marketing_source"]').filter('[value="'+marketing_source+'"]').prop('checked', true);
$('#marketing_form input:radio[name="marketing_source"]').checkboxradio('refresh');

使用的 CSS 与此类似。

#marketing_right_div, #marketing_left_div {
    display: inline-block !important;
    width: 314px !important;
    text-align: top;
    vertical-align: top;
}

【讨论】：