Rails Simple_form gem and jQuery Mobile Checkboxes

Question

I'm using the simple_form gem in rails 3.2.2 and am trying to set up checboxes for a HABTM association.

A Monitoring has and belongs to many Scenarios and vica versa.

Using simple form, I can output a set of checkboxes automatically using:

= f.association :scenarios, as: :check_boxes

This produces the following output:

<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>

However, jQuery Mobile will only style and recognise it if it is in the following format:

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

Anyone know how to do this?

Answer 1

在config / initializers / simple_form.rb中将config.boolean_style从:nested更改为:inline ，如您在以下行中所见：https://github.com/plataformatec/simple_form/blob/master/lib/generators/simple_form/templates /config/initializers/simple_form.rb.tt#L94-98

Answer 2

It's a bit of a hack but you can re-organize your HTML when the pagecreate event fires:

//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();
    });
});​

Here is a demo: http://jsfiddle.net/vAjDn/2/