Rails 4 - 当单选按钮移动到true时，jQuery隐藏/显示表单域 [英] Rails 4 - jQuery to hide/show form fields when radio button is moved to true

问题描述

我的表中有一个布尔属性。我试图找出如何在我的Rails 4应用程序中使用jQuery。我问一个问题，使用表单中的单选按钮来得到一个真或假的答案。

如果答案是真的，我的目标是提出后续的隐藏问题直到真正被选中的形式。

我有这种形式的问题：

 <％= f.input：ethics_relevance，如：：radio_buttons，：label => '伦理审查是否相关？'％> 
 
< / div> 
 
< div id =project_ethics_relevance_contentclass =content hidden> 
 
< div class =row> 
<％= f.simple_fields_for：道德操守| f | ％GT; 
 <％=渲染'ethics / ethic_fields'，f：f％> 
<％end％> 
< / div> 
 
< div class =row> 
< div class =col-md-6> 
 <％= link_to_add_association'添加道德考虑'，f，：道德，部分：'道德/道德领域'％> 
< / div> 
< / div> 
< / div> 
  

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

$（）

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $点击'，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'）;
}
}）;

}）;

我知道上面的尝试是错误的，我试图根据我能从中得到的结果post：

Rails 4表单：基于单选按钮选择的条件字段显示

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

表单上的Chrome检查器显示：

 < div class =form-group radio_buttons optional project_ethics_relevance>< label class =radio_buttons optional control-label>研究伦理审查是否相关？< / label> < span class =radio>< label for =project_ethics_relevance_true>< input class =radio_buttons optionaltype =radiovalue =truename =project [ethics_relevance]id = project_ethics_relevance_true>是< /标签>< /跨度>< span class =radio>< label for =project_ethics_relevance_false>< input class =radio_buttons optionalreadonly =readonlytype =radiovalue =falsename =project [ethics_relevance] ID = project_ethics_relevance_false >否LT; /标签>< /跨度>< / 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（' （'hidden'）。addClass（'hidden'）; 
} 
}）; 
 
}）; 
< / script> 
  

I'm trying to figure out how to use jQuery in my Rails 4 app.

I have a boolean attribute in my table. I ask a question to get a true or false answer using radio buttons in the form.

If the answer is true, my objective is to ask follow up questions which are hidden until true is selected in the form.

I have this form question:

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

Then in my app/assets/javascripts/projects.js file, I have:

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');
           }
   });

});

I know the attempt above is wrong, I tried to make it based on what I could glean from this post:

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

Can anyone see what I need to do to have a form unhide hidden fields based on radio button form selection?

Chrome inspector on the form shows:

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

解决方案

Try this

<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隐藏/显示表单域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！