使用javascript限制用户响应的数量

Question

I would like to limit the number of response to just 3 from 5 of the Social Apps listed. User can only rank 3 social apps out of 5.

Im using questback to create the questionnaire but I need help in creating the condition using javascript

<table>   
<tr> 
<td>Instagram</td> 
<td><input type="radio" class="socialapps" name="socialapps_1" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" name="socialapps_1" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" name="socialapps_1" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Twitter</td> 
<td><input type="radio" class="socialapps" name="socialapps_2" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" name="socialapps_2" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" name="socialapps_2" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Facebook</td> 
<td><input type="radio" class="socialapps" name="socialapps_3" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" name="socialapps_3" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" name="socialapps_3" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Linkedin</td> 
<td><input type="radio" class="socialapps" name="socialapps_4" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" name="socialapps_4" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" name="socialapps_4" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Whatsapp</td> 
<td><input type="radio" class="socialapps" name="socialapps_5" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" name="socialapps_5" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" name="socialapps_5" 
value="Ipod A"></td> 
</tr>
</table>

$(document).ready(function () {
$("input[class='socialapps']").change(function () {
  var maxAllowed = 3;
  var cnt = $("input[class='socialapps']:checked").length;
  if (cnt > maxAllowed)
  {
     $(this).prop("checked", "");
     alert('Select maximum ' + maxAllowed + ' social apps!');
 }
});
});

Thank you.

Answer 1

Search for other checked inputs that have the same value using:

$inputs = $("input[class='socialapps']");

if ( $inputs.filter('[value="' + val + '"]:checked').length > 1 ) { ... }

 (function($) { $inputs = $("input[class='socialapps']"); $inputs.change(function() { var $this = $(this), val = $this.val(), maxAllowed = 3, cnt = $("input[class='socialapps']:checked").length; if (cnt > maxAllowed) { $this.prop("checked", ""); alert('Select maximum ' + maxAllowed + ' social apps!'); } if ($inputs.filter('[value="' + val + '"]:checked').length > 1) { $this.prop("checked", ""); alert('Only one ' + val); } }); })(jQuery);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>Instagram</td> <td><input type="radio" class="socialapps" name="socialapps_1" value="Radio A"></td> <td><input type="radio" class="socialapps" name="socialapps_1" value="Radio B"></td> <td><input type="radio" class="socialapps" name="socialapps_1" value="Ipod A"></td> </tr> <tr> <td>Twitter</td> <td><input type="radio" class="socialapps" name="socialapps_2" value="Radio A"></td> <td><input type="radio" class="socialapps" name="socialapps_2" value="Radio B"></td> <td><input type="radio" class="socialapps" name="socialapps_2" value="Ipod A"></td> </tr> <tr> <td>Facebook</td> <td><input type="radio" class="socialapps" name="socialapps_3" value="Radio A"></td> <td><input type="radio" class="socialapps" name="socialapps_3" value="Radio B"></td> <td><input type="radio" class="socialapps" name="socialapps_3" value="Ipod A"></td> </tr> <tr> <td>Linkedin</td> <td><input type="radio" class="socialapps" name="socialapps_4" value="Radio A"></td> <td><input type="radio" class="socialapps" name="socialapps_4" value="Radio B"></td> <td><input type="radio" class="socialapps" name="socialapps_4" value="Ipod A"></td> </tr> <tr> <td>Whatsapp</td> <td><input type="radio" class="socialapps" name="socialapps_5" value="Radio A"></td> <td><input type="radio" class="socialapps" name="socialapps_5" value="Radio B"></td> <td><input type="radio" class="socialapps" name="socialapps_5" value="Ipod A"></td> </tr> </table>

Answer 2

Your question was interesting, so I took some time to play with solution that has as little code as possible (in the time I had).

 $(document).ready(function () { var maxAllowed = 3; function check(){ if ($("input.socialapps:checked").length > maxAllowed){ alert('Select maximum ' + maxAllowed + ' social apps!'); return false; } return true; } $("input.socialapps").change(function (e) { if (!check()) e.target.checked = false; }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>Instagram</td> <td><input type="radio" class="socialapps" value="1" name="socialapps_1" value="Radio A"></td> <td><input type="radio" class="socialapps" value="2" name="socialapps_1" value="Radio B"></td> <td><input type="radio" class="socialapps" value="3" name="socialapps_1" value="Ipod A"></td> </tr> <tr> <td>Twitter</td> <td><input type="radio" class="socialapps" value="1" name="socialapps_2" value="Radio A"></td> <td><input type="radio" class="socialapps" value="2" name="socialapps_2" value="Radio B"></td> <td><input type="radio" class="socialapps" value="3" name="socialapps_2" value="Ipod A"></td> </tr> <tr> <td>Facebook</td> <td><input type="radio" class="socialapps" value="1" name="socialapps_3" value="Radio A"></td> <td><input type="radio" class="socialapps" value="2" name="socialapps_3" value="Radio B"></td> <td><input type="radio" class="socialapps" value="3" name="socialapps_3" value="Ipod A"></td> </tr> <tr> <td>Linkedin</td> <td><input type="radio" class="socialapps" value="1" name="socialapps_4" value="Radio A"></td> <td><input type="radio" class="socialapps" value="2" name="socialapps_4" value="Radio B"></td> <td><input type="radio" class="socialapps" value="3" name="socialapps_4" value="Ipod A"></td> </tr> <tr> <td>Whatsapp</td> <td><input type="radio" class="socialapps" value="1" name="socialapps_5" value="Radio A"></td> <td><input type="radio" class="socialapps" value="2" name="socialapps_5" value="Radio B"></td> <td><input type="radio" class="socialapps" value="3" name="socialapps_5" value="Ipod A"></td> </tr> </table>