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

任何人都可以看到我需要做什么才能让表单根据单选按钮表单选择取消隐藏隐藏字段？

表单上的Chrome检查器显示：

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

Rails 4 - 当单选按钮移动到true时，jQuery隐藏/显示表单字段

1 个答案: