Rails 4-在单选按钮变为true时隐藏/显示表单字段的jQuery

Question

我正在努力弄清楚如何在Rails 4应用程序中使用jQuery。

我的表中有一个布尔属性。我问一个问题，以得到一个正确或错误的答案使用单选按钮的形式。

如果答案是正确的，我的目标是问后续问题，这些问题是隐藏的，直到真在表格中被选中。

我有一个表格问题：

<%= f.input :ethics_relevance, as: :radio_buttons,  :label => 'Is an ethics review relevant?' %>

</div>  

<div id="project_ethics_relevance_content" class="content hidden">

    <div class="row">           
        <%= f.simple_fields_for :ethics do |f| %>
        <%= render 'ethics/ethic_fields', f: f %>
        <% end %>
    </div>

    <div class="row">
        <div class="col-md-6">
            <%= link_to_add_association 'Add an ethics consideration', f, :ethics, partial: 'ethics/ethic_fields' %>
        </div>
    </div>
</div>  

然后，在我的app/assets/javascripts/projects.js文件中，我有：

jQuery(document).ready(function() {

   jQuery("#project_ethics_relevance").on('click', function() {
       console.log("here I am ")

           if (jQuery(this)[0].value) {
               jQuery('#project_ethics_relevance_content').removeClass('hidden');
           } else {
               jQuery('#project_ethics_relevance_content').addClass('hidden');
           }
   });

});

我知道上面的尝试是错误的，我试图根据我从这篇文章中收集到的东西来做它：

Rails 4 form: conditional display of fields based on radio button selection

有人能看到我需要做些什么才能根据单选按钮表单选择一个表单来隐藏隐藏的字段吗？

表格上的铬检查器显示：

<div class="form-group radio_buttons optional project_ethics_relevance"><label class="radio_buttons optional control-label">Is a research ethics review relevant?</label><span class="radio"><label for="project_ethics_relevance_true"><input class="radio_buttons optional" type="radio" value="true" name="project[ethics_relevance]" id="project_ethics_relevance_true">Yes</label></span><span class="radio"><label for="project_ethics_relevance_false"><input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="project[ethics_relevance]" id="project_ethics_relevance_false">No</label></span></div>

Answer 1

尝尝这个

<script>
jQuery(document).ready(function() {
   jQuery('[name="project[ethics_relevance]"]').on('click', function() {
      if (jQuery(this).val() == 'true' ) {
          jQuery('#project_ethics_relevance_content').removeClass('hidden');
      } else {
          jQuery('#project_ethics_relevance_content').removeClass('hidden').addClass('hidden');
      }
   });

});
</script>