kann Tabellenzeile basierend auf einem Kontrollkästchen nicht ein-/ausblenden.

Question

Ich habe ein Formular arbeiten, wo die Änderung eines Dropdown-Wertes ausblenden oder eine Zeile anzeigen. Was ich nicht arbeiten kann, ist zu versuchen, eine Zeile basierend auf einer Checkbox zu verstecken oder sichtbar zu machen.

Mein Javascript_tag ist

<%= javascript_tag do %> 
     $(document).ready(function(){ 
    //  if($("#observation_discussed_with_employee").is('checked'){ 
       $(".hidden_option_date_discussed").fadeIn('slow'); 
       alert("test"); 
    //  } 
     }); 
<% end %> 

Die style_add.css

ist

.hidden_option{ 
    display: none; 
} 

.hidden_option_date_discussed{ 
    display: none; 
} 

Ich habe das Stylesheet mit <%= stylesheet_link_tag "style_adds" %> (die anderen hide/show verknüpft funktioniert, damit ich weiß, ich bin in der Lage dieses Stylesheet verwenden

Das Kontrollkästchenfeld und das nachfolgende Feld, das ich ein-/ausblenden möchte, sind unter

<tr> 
       <div id="discussed"> 
       <td><%= f.label :discussed_with_employee %></td> 
       <td><%= f.check_box :discussed_with_employee %></td> 
       </div> 
     </tr> 

     <tr class="hidden_option_date_discussed"> 

Wenn ich die Seite mit den if-Anweisungen wie gezeigt ausgeführt habe, bekomme ich die Alarmbox. Wenn ich die if-Anweisungen jedoch abnehme, sehe ich keine Warnung.

 <div class="field" > 
      <td><%= f.label :date_discussed %></td> 
      <td><%= f.date_select(:date_discussed, :default => 0.days.from_now, min: 1.year.ago) %></td> 
     </div> 
</tr> 

Answer 1

Ihr Problem ist die Tatsache, dass Sie eine if-Anweisung verwenden. Die Funktionsweise der if-Anweisung ist, dass sie einmal ausgelöst wird, und das war's. Die Funktion, die Sie suchen, ist change(). So soll es sein:

$(document).ready(function(){ 
    $("#observation_discussed_with_employee").change(function(){ 
     if($("#observation_discussed_with_employee").is('checked'){ 
      $(".hidden_option_date_discussed").fadeIn('slow'); 
      alert("test"); 
     } 
    }); 
}); 

Sie feuert die if-Anweisung jedes Mal, wenn der Wert von #observation_discussed_with_employee Änderungen (so, wenn es entweder aktiviert oder deaktiviert).

Edit: Wie jemand in den Kommentaren sagte, müssen Sie noch eine else-Anweisung mit FadeOut machen, so dass es in beide Richtungen funktioniert.

Answer 2

Es scheint, dass das Problem dadurch verursacht wurde, dass man nicht an eine Checkbox binden konnte. Ich habe die Dinge ein wenig anders gemacht und die Checkbox in ein 'Ja/Nein' geändert mit Werten, die auf "Wahr" und "Falsch" gesetzt sind.

Ich habe folgendes auf die Javascript

if($("#observation_testchk").val() == "true"){ 
     $(".hidden_option_date_discussed").fadeIn('slow'); 
      } 


    $("#observation_testchk").change(function(){ 
      if($("#observation_testchk").val() == "true"){ 
      //if($("#observation_testchk").val() == 1){ 
       $(".hidden_option_date_discussed").fadeIn('slow'); 
       } 
      else if ($("#observation_testchk").val() == "false"){ 
       $(".hidden_option_date_discussed").fadeOut('slow'); 
       } 
      }); 

und dieses Feld hinzugefügt

  <div class="field"> 
      <td><%= f.label :testchk %></td> 
      <td><%= f.select :testchk, [['Yes','true'],['No','false']] %></td> 
      </div> 

Das hat mir eine Ja/Nein-Drop-Down gibt. Wenn Sie Ja oder Nein auswählen, wird das andere Feld entsprechend ein-/ausgeblendet. Ich muss den Code noch etwas auffrischen, aber die Hauptlektion war:

Ich konnte JS nicht an eine Checkbox binden. Es würde jedoch an ein Dropdown-Menü gebunden werden.