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

【问题标题】：Rails 4 - jQuery to hide/show form fields when radio button is moved to trueRails 4 - 当单选按钮移动到 true 时，jQuery 隐藏/显示表单字段
【发布时间】：2016-08-09 00:23:42
【问题描述】：

我正在尝试弄清楚如何在我的 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>

【问题讨论】：

您能否提供您拥有的最终 HTML（以及 NOT ruby 代码）？您似乎没有任何带有id="project_ethics_relevance" 的单选按钮。
我没有为问题分配 div id。只有内容。在 jQuery 方法中，对 project_ethics_relevance 的顶行引用是对项目表的引用，其属性名为 :ethics_relevance。这种方法似乎适用于我代码的其他部分的隐藏和显示（我只是还没有尝试让它在单选按钮上工作）。
你说你希望当一个按钮被移动为真时发生一些事情，那么按钮在哪里以及如何检查它是否被移动为真？
表单中有一个radio_buttons元素，用于：read_relevance - 选择是/ true时，我希望jQuery响应 span>
如前所述 - 如果您需要帮助，请提供 html 的输出，以便为您提供帮助。

标签： jquery ruby-on-rails forms

【解决方案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>

【讨论】：

非常感谢 Preethi
很高兴！它有帮助！ @梅尔
这在开发模式下工作正常，但在生产环境中不起作用。控制台中没有错误 - 它只是在单选按钮设置为 true 时不显示
@Mel 你有没有尝试在 if 条件中放置一个警报
在开发环境中一切正常，但在生产环境中完全不行。