Come nascondere parte di un modulo di rails 3 in base al valore selezionato dal menu a discesa

Question

Ho un _form parziale, _form per una delle mie viste in rotaie. Sembra così:

<%= 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 %> 

mi piacerebbe la parte "costo del capitale" del modulo per essere in grigio a meno che "In Progress" è selezionato dal menu a discesa, senza dover ricaricare la pagina. È possibile? Ho visto alcune soluzioni usando javascript, ma sono un principiante e non riesco a capirlo (purtroppo non ho il tempo di imparare a usare js prima di finire questo progetto). Saluti!

Answer 1

Per questo è necessario un po 'di JavaScript. Utilizzare un gestore di eventi onchange per monitorare l'input <select> per le modifiche. Confronta il valore di input e imposta/disattiva condizionatamente un attributo disabled sull'input #project_capital_cost. Puoi usare jQuery per questo.

Per impostazione predefinita, Rails 3 abilita jQuery includendo la gemma jquery_rails nel file Gem. Supponendo di aver jquery_rails incluso nel app e i tuoi <select> e <input> tag hanno #project_status e #project_capital_cost ID, rispettivamente, aggiungere il seguente script nella vostra _form parziale con necessaria modifica:

<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> 

EDIT:

Per nascondere div fornire ad esso id:

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

.210

quindi sostituire

$("#project_capital_cost").attr('disabled','disabled'); con $("#my_div").css('display','none')

e

$("#project_capital_cost").removeAttr('disabled'); con $("#my_div").css('display','block') nello script.