我有一个部分的,_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的@R_301_463@案,但我是一个完全的初学者,无法理解他们(不幸的是我没有时间学习使用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’).