允许两个复选框/ RoR应用程序

Question

Hello I'm developing a form generator with RoR and I want allow only 2 checkboxes when I have a 'multiple choice' question. I wrote a JavaScript that works for this example :

My View example

<div>
 <h4>
  Form 1
 </h4>
<form id="form_1">
  <input type="checkbox"  value="1">
  <input type="checkbox"  value="2">
  <input type="checkbox"  value="3">
</form>
</div>

<div>
<h4>
 Form 2
</h4>
 <form id="jj">
  <input type="checkbox" name="group" value="1">
  <input type="checkbox" name="group" value="2">
  <input type="checkbox" name="group" value="3">
</form>

My Javascript :

<script>

$(function() {
  $('form input[type=checkbox]').on('change', function(e) {
  var MyForm=this.parentNode.id;
  if ($('form[id='+MyForm+'] input[type=checkbox]:checked').length == 2) {
  $('form[id='+MyForm+'] input[type=checkbox]:not(:checked)').prop('disabled', 'disabled');
}else{
  $('form[id='+MyForm+'] input[type=checkbox]:not(:checked)').prop('disabled', false);
  }
 });

});

How can I adapt to to make it works with my Ruby code :

<%= form_for([@formulaire, @formulaire.polls.new]) do |f| %>
            <% @formulaire.questions.each_with_index do |question, i| %>
            <li>
                <div>

                <form id="form"> 
                <%= question.nom.html_safe %>
                <ul>
                   <% if question.typequestion == "choix_multiple"%>
                        <% question.answers.each_with_index do |answer, j| %>
                                <div>
                                <%  a= Answer.find_by_sql(["Select * from answers where id=?", answer.id]).as_json(only: [:question_id,:content]) %>
                                <%= check_box_tag :"nom_#{i}_#{j}", answer.id %> 
                                <%= f.label :"nom_#{answer.content}", answer.content%> <% answer.id%>
                                <br/>
                                </div>
                        <% end %>
                    <% elsif question.typequestion == "choix_simple"%>
                        (...)

        <%= f.submit "Valider les réponses", class:"pull-right btn btn-primary" %>
<% end %>

Answer 1

jQuery is not linked with the form. Simple solution is to add a class with each form and use that class in selector.

 $(document).ready(function() { $('.form input[type=checkbox]').on('change', function(e) { var MyForm=this.parentNode.id; if ($('form[id='+MyForm+'] input[type=checkbox]:checked').length == 2) { $('form[id='+MyForm+'] input[type=checkbox]:not(:checked)').prop('disabled', 'disabled'); }else{ $('form[id='+MyForm+'] input[type=checkbox]:not(:checked)').prop('disabled', false); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div> <h4> Form 1 </h4> <form id="form_1" class="form"> <input type="checkbox" value="1"> <input type="checkbox" value="2"> <input type="checkbox" value="3"> </form> </div> <div> <h4> Form 2 </h4> <form id="jj" class="form"> <input type="checkbox" name="group" value="1"> <input type="checkbox" name="group" value="2"> <input type="checkbox" name="group" value="3"> </form> 

In your Ruby code

<%= form_for([@formulaire, @formulaire.polls.new]) do |f| %>
            <% @formulaire.questions.each_with_index do |question, i| %>
            <li>
                <div>

                <form id="form" class="form"> 
                <%= question.nom.html_safe %>
                <ul>
                   <% if question.typequestion == "choix_multiple"%>
                        <% question.answers.each_with_index do |answer, j| %>
                                <div>
                                <%  a= Answer.find_by_sql(["Select * from answers where id=?", answer.id]).as_json(only: [:question_id,:content]) %>
                                <%= check_box_tag :"nom_#{i}_#{j}", answer.id %> 
                                <%= f.label :"nom_#{answer.content}", answer.content%> <% answer.id%>
                                <br/>
                                </div>
                        <% end %>
                    <% elsif question.typequestion == "choix_simple"%>
                        (...)

        <%= f.submit "Valider les réponses", class:"pull-right btn btn-primary" %>
<% end %>