ruby-on-rails – 如何隐藏部分rails 3表单,具体取决于从下拉菜单中选择的值

我有一个部分的,_form用于我在rails中的一个视图.它看起来像这样：

<%= form_for(@project) do |f| %>
  <div class="field">
    <%= f.label "Project Status" %><br />
    <%= f.select :status,["In Progress","Cancelled"] %>
  </div>

  <div class="field">
    <%= f.label "Capital Cost" %><br />
    <%= f.text_field :capital_cost %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>

<% end %>

除非从下拉菜单中选择“进行中”,否则我希望表单的“资本成本”部分显示为灰色,而无需重新加载页面.这可能吗？我看到一些使用javascript的解决方案,但我是一个完全的初学者,无法理解他们(不幸的是我没有时间学习使用js之前我必须完成这个项目).干杯!

解决方法

为此你需要一些JavaScript.使用onchange事件处理程序来监视< select>输入变化.比较输入值并有条件地设置/取消设置#project_capital_cost输入上的禁用属性.你可以使用jQuery.

默认情况下,Rails 3通过在Gemfile中包含jquery_rails gem来启用jQuery.假设您的应用中包含了jquery_rails,并且< select>和<输入>标签分别有#project_status和#project_capital_cost ID,通过必要的修改将以下脚本添加到_form部分：

<script>
  $(document).ready(function(){
     if($('#project_status').val() != "In Progress"){
        $("#project_capital_cost").attr('disabled','disabled');
     }
     else{
        $("#project_capital_cost").removeAttr('disabled');
     }

     $('#project_status').change(function(){
        if($(this).val() != "In Progress"){
          $("#project_capital_cost").attr('disabled','disabled');
        }
        else{
          $("#project_capital_cost").removeAttr('disabled');
        }
     })
  });

</script>

编辑：

隐藏div给它一些id：

<div class="field" id="my_div">
    <%= f.label "Capital Cost" %><br />
    <%= f.text_field :capital_cost %>
  </div>

然后更换

$( “#project_capital_cost”)ATTR( ‘禁用’,‘禁用’). with $(“#my_div”).css(‘display’,’none’)

和

$( “#project_capital_cost”)removeAttr( ‘禁用’).在脚本中使用$(“#my_div”).css(‘display’,’block’).