rails4-jQuery在单选按钮移到true时隐藏/显示表单字段

rails4-jQuery在单选按钮移到true时隐藏/显示表单字段,jquery,ruby-on-rails,forms,Jquery,Ruby On Rails,Forms,我正试图弄清楚如何在Rails 4应用程序中使用jQuery 我的表中有一个布尔属性。我用表单中的单选按钮提问以获得正确或错误的答案 如果答案是真的,我的目标是询问后续问题,这些问题在表格中选择“真”之前是隐藏的 我有一个问题: <%= f.input :ethics_relevance, as: :radio_buttons, :label => 'Is an ethics review relevant?' %> </div> <div id="

我正试图弄清楚如何在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>  
我知道上面的尝试是错误的,我试着根据我从这篇文章中得到的信息来做:

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

表单上的Chrome inspector显示:

<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>
研究伦理审查是否相关
试试这个

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

jQuery(文档).ready(函数(){
jQuery('[name=“project[ethics\u relevance]”)。在('click',function()上{
if(jQuery(this).val()=='true'){
jQuery(“#项目#伦理(项目)相关性(内容)”).removeClass("隐藏");
}否则{
jQuery(“#项目#道德#相关性(内容”).removeClass('hidden').addClass('hidden');
}
});
});

您能否提供最终的HTML(而不是ruby代码)?似乎您没有任何带有
id=“project\u ethics\u relevance”
的单选按钮。我没有为问题分配div id。只有内容。在jQuery方法中,对project\u ethics\u relevance的顶行引用是对project表的引用,其属性名为:ethics\u relevance。这种方法似乎适用于我的隐藏和显示代码的其他部分(我只是还没有试着让它在单选按钮上工作)。你说过你希望当一个按钮被移动到true时发生一些事情,那么按钮在哪里以及如何检查它是否被移动到true?表单中有一个单选按钮元素,用于:ethics\u relevance-当选择yes/true时,我希望jQuery响应前面提到的内容-如果您需要帮助,请提供html的输出,这样就可以帮助您了。非常感谢!这很有帮助@这在开发模式下运行良好,但在生产环境中不起作用。控制台中没有错误-当单选按钮设置为true@Mel您是否尝试过在if条件中添加警报?它在开发环境中运行良好,但在生产环境中根本不起作用。
<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>