我有一个部分的,_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’).