Rails Simple_form gem和jQuery Mobile複選框

我在rails 3.2.2中使用了simple_form gem，並且正在嘗試爲HABTM關聯設置checboxes。Rails Simple_form gem和jQuery Mobile複選框

A 監測已經和屬於很多方案和反之亦然。

使用簡單的形式，我可以輸出一組複選框自動使用：

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

任何人都知道如何做到這一點？

來源

2012-03-15 Ammar

變化的config.boolean_style從:nested到:inline您config/initializers/simple_form.rb，您可以在這些行中看到https://github.com/plataformatec/simple_form/blob/master/lib/generators/simple_form/templates/config/initializers/simple_form.rb.tt#L94-98

來源

2012-03-17 00:19:32 rafaelfranca

這可以工作，但不會將其顯示爲分組複選框。任何想法如何做到這一點？ – Ammar 2012-03-17 17:42:22

所有collection_check_boxes都呈現爲內聯。它沒有發生？ – rafaelfranca 2012-03-18 06:05:50

它現在將它們渲染爲有效的jQuery Mobile複選框。但是，複選框未分組。你可以在[docs page]上看到我的意思（http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/checkboxes/），我得到的是第一個例子，而我正在尋找的是垂直分組的複選框？ – Ammar 2012-03-22 10:24:43

這是一個黑客位，但你可以重新組織你的HTML當pagecreate事件觸發：

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

這裏是一個演示：http://jsfiddle.net/vAjDn/2/

來源

2012-03-15 22:40:21 Jasper

Rails Simple_form gem和jQuery Mobile複選框

回答

相關問題