带有普通单选按钮的simple_form自定义包装器

Question

我正在尝试为这样的混合形式制作自定义包装器：

这里的想法是，有单选按钮可以启用日期选择器，发生或无限期。我目前手动创建这些，我正在尝试制作一个自定义的简单表单包装器，以避免在简单的输入中添加大量代码的麻烦。第二次出现的输入是我无法完成的输入。以下是显示的表单的HTML：

<div class="form-group radio_buttons required work_order_end_task">
  <label class="radio_buttons required col-sm-2 control-label"><i class="fa fa-check-circle text-danger"></i> End Date</label>
  <div class="col-sm-2">
    <div class="input-group">
      <span class="input-group-addon border-none">
        <input class="radio_buttons required" type="radio" value="date" name="work_order[end_task]" id="work_order_end_task_date">
      </span>
      <input disabled="" type="text" value="" name="work_order[end_date]" id="work_order_end_date" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-clear-btn="true" data-date-today-btn="linked" data-date-orientation="auto right" data-date-today-highlight="true" class="date required form-control left-border-rounded">
      <span class="input-group-addon">
        <i class="fa fa-calendar"></i>
      </span>
    </div>
    <br>
    <div class="input-group">
      <span class="input-group-addon border-none">
        <input class="radio_buttons required" type="radio" value="number" name="work_order[end_task]" id="work_order_end_task_number">
      </span>
      <input class="numeric integer form-control" type="string" value="" name="work_order[count]" id="work_order_count">
      <span class="input-group-addon">
        Occurrence(s)
      </span>
    </div>
    <br>
    <div class="input-group integer optional work_order_count">
      <span class="input-group-addon border-none radio_buttons optional work_order_end_task">
        <span class="radio">
          <label for="work_order_end_task_none">
            <input class="radio_buttons optional radio_buttons" type="radio" value="none" checked="checked" name="work_order[end_task]" id="work_order_end_task_none">
          </label>
        </span>
      </span>
      <input class="string optional form-control" type="text" value="" name="work_order[count]" id="work_order_count">
      <span class="input-group-addon">Occurrence(s)</span>
    </div>        
    <br>
    <div class="form-group radio_buttons optional work_order_end_task"><div class="col-sm-10"><span class="radio"><label class="static-radio" for="work_order_end_task_none"><input class="radio_buttons optional" type="radio" value="none" checked="checked" name="work_order[end_task]" id="work_order_end_task_none">Indefinite</label></span></div></div>
  </div>
</div>

问题是所有额外的跨度和标签被添加。这是我的代码：

<%= f.input :count, wrapper: :input_group do %>
  <%= f.input :end_task, as: :radio_buttons, wrapper: :radio_addon, collection: [['','none']], label: false %>
  <%= f.input_field :count, as: :string, class: "form-control" %>
  <span class="input-group-addon">Occurrence(s)</span>
<% end %>

和包装器：

  config.wrappers :input_group, tag: 'div', class: 'input-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :input, class: 'form-control'
  end

  config.wrappers :radio_addon, tag: 'span', class: 'input-group-addon border-none' do |b|
    b.use :html5
    b.optional :readonly
    b.use :input, class: 'radio_buttons'
  end

那么如何摆脱<span class="radio"> 和单选按钮上的<label for="work_order_end_task_none">然后将所有额外的类（例如integer optional work_order_count）插入到包装器和输入中？

Answer 1

我想我想出了这个（有点）：

  <span class="input-group-addon border-none">
    <%= f.radio_button :end_task, 'number', label: false %>
  </span>

像魅力一样工作。我仍然想为此添加一个自定义包装器，以避免必须手动添加包装器跨度，但这似乎不起作用。