css - 未选中单选按钮时禁用 number_field

Question

我正在尝试制作一个表单，如果它的相关单选按钮被选中，则只显示一个 number_field。我可以用 CSS 隐藏 number_field，但由于所有 number_fields 都具有相同的名称，因此该应用程序仅在数据库中保存最后一个字段(即使未选中其相关的 radio ，因为 CSS 仅隐藏该字段)。只有选中相关单选按钮，才能将 number_field 数据发送到数据库吗？

换句话说:如果这段代码生成5个单选按钮，发送到数据库时，最后一个number_field的值是最终写入数据库的值，而我希望只有选择了相关 radio_button 的 number_field 被发送到数据库。

有一种方法可以在 Controller 或模型中做到这一点吗？

我的看法:

<% @shipping_method_list.each do |shipping| %>
  <div>
    <%= f.radio_button :shipping_method_id, shipping.id %>
    <% @sm_id = :shipping_method_id.to_s + "_" + shipping.id.to_s %>
    <%= f.label @sm_id, shipping.name %>
    <span class="reveal-if-active">Cost: <%= f.number_field :shipping_cost %></span> # This is what I want to disable when the radio isn't checked.
  </div>
<% end %>

还有我的 CSS:

.reveal-if-active {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

input[type="radio"]:checked ~ .reveal-if-active,
input[type="checkbox"]:checked ~ .reveal-if-active {
  opacity: 1;
  max-height: 100px;
  overflow: visible;
}

Answer 1

好吧，尽管我尝试只为此使用 RoR，但我没有时间学习如何做，所以我只是使用 javascript 来禁用未使用的元素(当 radio_button 未选中时禁用 number_field)。这样，数据库将仅在启用 number_field 的情况下写入。

感谢大家的帮助。