6

对于我在 Rails 中的一个观点，我有一个部分的 _form。它看起来像这样：

<%= 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）。干杯!

4

2 回答 2

6

为此，您需要一些 JavaScript。使用onchange事件处理程序来监视<select>输入的更改。比较输入值并有条件地设置/取消设置输入的disabled属性#project_capital_cost。您可以为此使用 jQuery。

默认情况下，Rails 3 通过jquery_rails在 Gemfile 中包含 gem 来启用 jQuery。假设您已jquery_rails包含在您的应用中，并且您的<select>和<input>标签分别具有#project_status和#project_capital_costID，请将以下脚本添加到您的_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('disabled','disabled');和$("#my_div").css('display','none')

和

$("#project_capital_cost").removeAttr('disabled');在$("#my_div").css('display','block')脚本中。

于 2013-02-24T18:33:23.723 回答
3

要使输入变灰，请使用禁用的 HTML 输入标记属性。

<input disabled="disabled">

Rails 中的哪个是

<%= f.text_field :capital_cost, :disabled => "disabled", :id => "capital_cost_input" %>

在选择“进行中”时启用它需要 AJAX 和 Javascript，但 Rails 提供了一些帮助。

第一的

<%= f.select :status, ["In Progress", "Cancelled"],
             {},
             "data-remote" => true, "data-url" => ..._path %>

这将为您设置 onchange 属性并进行 AJAX 调用。

添加一个路由来处理 AJAX 调用，并为“data-url”提供 URL。

在 AJAX 操作的视图模板中，编写 Javascript 以启用输入。就像是

$('#capital_cost_input').removeAttr("disabled")
于 2013-02-24T18:33:12.900 回答