Wie man einen Teil einer Schiene 3 ausblenden kann, abhängig von dem Wert, der aus dem Dropdown-Menü ausgewählt wurde

Question

Ich habe eine partielle _Form für eine meiner Ansichten in Schienen. Es sieht so aus:

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

ich den „Kapitalkosten“ Teil des Formulars abgeblendet werden möchte, es sei denn „In Progress“ aus dem Drop-Down-Menü ausgewählt wird, ohne die Seite neu zu laden. Ist das möglich? Ich sah einige Lösungen mit Javascript, aber ich bin ein kompletter Anfänger und konnte mich nicht um sie kümmern (leider habe ich nicht die Zeit zu lernen, js zu verwenden, bevor ich dieses Projekt beenden muss). Prost!

Answer 1

Dafür benötigen Sie ein wenig JavaScript. Verwenden Sie einen Event-Handler, um den <select>-Eingang auf Änderungen zu überwachen. Vergleichen Sie den Eingabewert und setzen Sie das Attribut disabled auf dem #project_capital_cost-Eingang bedingt/unbestimmt. Sie können jQuery dafür verwenden.

Standardmäßig aktiviert Rails 3 jQuery, indem es den Edelstein jquery_rails in Ihre Gemfile einfügt. Angenommen, Sie haben jquery_rails, die in Ihrer Anwendung und Ihre <select> und <input> Tags haben #project_status und #project_capital_cost IDs bzw. fügen Sie das folgende Skript in Ihrem _form teilweise mit der notwendigen Änderung:

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

auszublenden div geben Sie dazu id:

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

ersetzen

Dann

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

und

$("#project_capital_cost").removeAttr('disabled'); mit $("#my_div").css('display','block') im Skript.