Question

我正在尝试使用这种通用结构制作一个简单的表单：

o accept  o decline
[submit]

当选中单选按钮接受并按下提交时，我希望它改变我模型的状态（这里称为Offer）。但是当选中按钮拒绝时，表单需要更改为以下内容：

o accept  x decline
Please enter reason here: [text box]
[submit]

输入（强制）拒绝和按下提交的原因后，也会更改模型商品的状态，但不同。

我目前在让表单显示我想要的方式时遇到问题。我正在使用SimpleForm并试过这样的事情：

<%= simple_form_for @offer do |f| %>
  <%= f.input accepts, as: :radio_buttons %>
  <%= f.input :r_comment, as: :text, :label => 'Please enter reason here:' , :input_html => { :rows => 2, } %>
  <%= f.button :submit %>
<% end %>

这当然不起作用，因为没有为商品定义的“接受”方法或变量（它不应该是！）。至于动态显示输入文本框，我甚至没有丝毫的线索。

我很乐意为你提供任何帮助，

Lordylike

更新：由simple_form生成的HTML

<div class="control-group radio_buttons optional">
  <label class="radio_buttons optional control-label">Accept?</label>
  <div class="controls">
    <label class="radio">
      <input class="radio_buttons optional" id="offer_accepts_decline" name="offer[accepts]" type="radio" value="Decline" />
      Decline
    </label>
    <label class="radio">
      <input class="radio_buttons optional" id="offer_accepts_accept" name="offer[accepts]" type="radio" value="Accept" />
      Accept
    </label>
  </div>

更新：为评论框生成HTML

<div class="control-group text optional">
    <label class="text optional control-label" for="offer_r_comment">Reason for rejection:</label>
    <div class="controls">
        <textarea class="text optional" cols="40" id="offer_r_comment" name="offer[r_comment]" rows="2">
        </textarea>
    </div>
</div>

Answer 1

我不是formtastic或simple_form的粉丝但是看文档，你应该能够做到以下

# offer.rb
attr_accessor :accepts

# view
<%= f.input :accepts, as: :radio_buttons, collection: ['Decline', 'Accept'] %>

# js which can be placed inline or in the assets. let's use coffee
# you should also limit the selector below to include the class or the id of the
# radio buttons.  I'm also not familiar with the html generated by simple form so
# the selectors to show and hide should also be changed.
$ ->
  $(':radio').change ->
    if $(this).prop('checked')
      if $(this).val() == 'Accept'
        $('#offer_r_comment').show()
      else
        $('#offer_r_comment').hide()

更新：非咖啡版。你可以把它放在一个脚本标签中，然后扔进视图。

$(document).ready(function() {
  $(':radio').change(function() {
    if ($(this).prop('checked'))
      if ($(this).val() == 'Accept')
        $('#offer_r_comment').show();
      else
        $('#offer_r_comment').hide();
  });
});

轨道形式的动态变化（simpleform）

1 个答案: