如何在两个嵌套的部分表单之间切换？

Question

所以用户选择“运行”作为他的challenge。现在他应该可以在类别之间切换：oneshot 或 ongoing。

现在所有属性都显示了，但是如果用户单击“One-shot”，我如何只显示oneshot 属性:deadline，如果用户单击“，我如何只显示ongoing 属性”进行中”？

挑战/_form.html.erb

  <%= form_for(@challenge) do |f| %>
    <%= f.text_field :action %>
    <% Challenge::CATEGORY.each do |c| %>
      <%= label(c, c) %>:
      <%= f.radio_button(:category, c, :class => "date-format-switcher") %>
    <% end %>
    <%= f.fields_for :category do |category| %>
      <%= render 'category_fields', :f => category %>
    <% end %>
    <%= button_tag(type: 'submit', class: "btn")  do %>
      Save
    <% end %>
  <% end %>

挑战/_category_fields.html.erb

  One-Shot
    <%= f.date_select :deadline, :order => [:month, :day, :year], use_short_month: true, class: 'date-select' %>
  Ongoing
    <%= f.date_select :date_started, :order => [:month, :day, :year], :with_css_classes => true, :class => "date-select" %>
    <%= f.collection_check_boxes :committed, Date::ABBR_DAYNAMES, :downcase, :to_s %>
    <%= f.number_field :days_challenged, value: 30, class: 'day-challenge' %> 
    <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip()
      })
    </script>

challenge.rb

class Challenge < ActiveRecord::Base
    scope :oneshot,  -> { where(categories: 'One-Shot') }
    scope :ongoing,  -> { where(categories: 'Ongoing') }
    CATEGORY = ['One-Shot', 'Ongoing']
end

Answer 1

将每个部分表单包装在一个带有 id 的 div 中，并在单选按钮点击时添加一些 javascript。

$(function(){
  $('#id_of_first_radio').click(function(){ $('#id_of_first_div').show(); $('#id_of_second_div').hide(); });
  $('#id_of_second_radio').click(function(){ $('#id_of_first_div').hide(); $('#id_of_second_div').show(); });
});