Rails简单表单gem和jQuery移动复选框

我正在使用rails 3.2.2中的简单表单gem，并尝试为HABTM关联设置checboxes

监控具有并属于许多场景，反之亦然

使用简单表单，我可以使用以下命令自动输出一组复选框：

= f.association :scenarios, as: :check_boxes

这将产生以下输出：

<div class="checkbox">
  <label class="checkbox">
    <div class="ui-checkbox">
      <input class="check_boxes optional" id="monitoring_scenario_ids_1" name="monitoring[scenario_ids][]" type="checkbox" value="1">
      </div>
    Haraam Meat Found</label>
  <input name="monitoring[scenario_ids][]" type="hidden" value="">
</div>

发现哈拉姆肉

但是，jQuery Mobile仅在其采用以下格式时才会对其进行样式设置和识别：

<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
<label for="checkbox-0">I agree</label>

我同意

---

有人知道怎么做吗？

这有点麻烦，但是当

pagecreate

事件触发时，您可以重新组织HTML：

//wait for the page to be created
$(document).delegate('[data-role="page"]', 'pagecreate', function () {

    //loop through each of the `div.checkbox` elements
    $.each($(this).find('div.checkbox'), function (index, element) {

        //cache the label for this `div.checkbox` element and the form inputs
        var $label = $(this).children('label').attr('for', $(this).find('input[type="checkbox"]')[0].id),
            $inputs = $label.find('input');

        //append the inputs at the same level as the label,
        //then select the checkbox and initialize a checkbox widget
        $label.parent().append($inputs).children('input[type="checkbox"]').checkboxradio();
    });
});​

---

下面是一个演示：

这有点像黑客，但是当

pagecreate

事件触发时，您可以重新组织HTML：

//wait for the page to be created
$(document).delegate('[data-role="page"]', 'pagecreate', function () {

    //loop through each of the `div.checkbox` elements
    $.each($(this).find('div.checkbox'), function (index, element) {

        //cache the label for this `div.checkbox` element and the form inputs
        var $label = $(this).children('label').attr('for', $(this).find('input[type="checkbox"]')[0].id),
            $inputs = $label.find('input');

        //append the inputs at the same level as the label,
        //then select the checkbox and initialize a checkbox widget
        $label.parent().append($inputs).children('input[type="checkbox"]').checkboxradio();
    });
});​

---

下面是一个演示：

将配置/初始化器/simple_form.rb中的

配置布尔_样式

从

:nested

更改为

：inline

，正如您在这几行中所看到的那样

将配置/初始化器/simple_form.rb中的

配置布尔_样式

从

:nested

更改为

:inline

请参见第

行中的内容，该操作有效，但不会将其呈现为分组复选框。有什么办法吗？所有的集合复选框都是内联的。它没有发生吗？它现在将它们呈现为有效的jQuery Mobile复选框。但是，复选框没有分组。您可以在上看到我的意思，我得到的是第一个示例，我要查找的是垂直分组的复选框？这是可行的，但不会将其呈现为分组的复选框。有什么办法吗？所有的集合复选框都是内联的。它没有发生吗？它现在将它们呈现为有效的jQuery Mobile复选框。但是，复选框没有分组。你可以在上面看到我的意思，我得到的是第一个例子，我要找的是垂直分组的复选框？