Limit the number of response by user using javascript












-2















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.






javascript







share|improve this question




















  • 1





    could you please share us the code that you have tried so far

    – Jayanth
    Nov 13 '18 at 8:31











  • We need your code to fix your problem.

    – Jack Bashford
    Nov 13 '18 at 8:36











  • I know you want the table to have the rows and columns, but when you use the radio buttons that way, the horizontal row shading implies the radio buttons are related on the horizontal axis. However, you are really asking them to just pick "one-of-each-column". Even if we gave you JS that did what you wanted, I don't think you would get very good survey results.

    – benc
    Nov 13 '18 at 8:40











  • Apologize all. I am very new at this. I have provided a sample code for your reference. Again, I apologize.

    – Mursid Rahman
    Nov 14 '18 at 2:47
















-2















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.






javascript







share|improve this question




















  • 1





    could you please share us the code that you have tried so far

    – Jayanth
    Nov 13 '18 at 8:31











  • We need your code to fix your problem.

    – Jack Bashford
    Nov 13 '18 at 8:36











  • I know you want the table to have the rows and columns, but when you use the radio buttons that way, the horizontal row shading implies the radio buttons are related on the horizontal axis. However, you are really asking them to just pick "one-of-each-column". Even if we gave you JS that did what you wanted, I don't think you would get very good survey results.

    – benc
    Nov 13 '18 at 8:40











  • Apologize all. I am very new at this. I have provided a sample code for your reference. Again, I apologize.

    – Mursid Rahman
    Nov 14 '18 at 2:47














-2












-2








-2








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.






javascript







share|improve this 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.






javascript




javascript






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 14 '18 at 2:42







Mursid Rahman

















asked Nov 13 '18 at 8:26









Mursid RahmanMursid Rahman

32




32








  • 1





    could you please share us the code that you have tried so far

    – Jayanth
    Nov 13 '18 at 8:31











  • We need your code to fix your problem.

    – Jack Bashford
    Nov 13 '18 at 8:36











  • I know you want the table to have the rows and columns, but when you use the radio buttons that way, the horizontal row shading implies the radio buttons are related on the horizontal axis. However, you are really asking them to just pick "one-of-each-column". Even if we gave you JS that did what you wanted, I don't think you would get very good survey results.

    – benc
    Nov 13 '18 at 8:40











  • Apologize all. I am very new at this. I have provided a sample code for your reference. Again, I apologize.

    – Mursid Rahman
    Nov 14 '18 at 2:47














  • 1





    could you please share us the code that you have tried so far

    – Jayanth
    Nov 13 '18 at 8:31











  • We need your code to fix your problem.

    – Jack Bashford
    Nov 13 '18 at 8:36











  • I know you want the table to have the rows and columns, but when you use the radio buttons that way, the horizontal row shading implies the radio buttons are related on the horizontal axis. However, you are really asking them to just pick "one-of-each-column". Even if we gave you JS that did what you wanted, I don't think you would get very good survey results.

    – benc
    Nov 13 '18 at 8:40











  • Apologize all. I am very new at this. I have provided a sample code for your reference. Again, I apologize.

    – Mursid Rahman
    Nov 14 '18 at 2:47








1




1





could you please share us the code that you have tried so far

– Jayanth
Nov 13 '18 at 8:31





could you please share us the code that you have tried so far

– Jayanth
Nov 13 '18 at 8:31













We need your code to fix your problem.

– Jack Bashford
Nov 13 '18 at 8:36





We need your code to fix your problem.

– Jack Bashford
Nov 13 '18 at 8:36













I know you want the table to have the rows and columns, but when you use the radio buttons that way, the horizontal row shading implies the radio buttons are related on the horizontal axis. However, you are really asking them to just pick "one-of-each-column". Even if we gave you JS that did what you wanted, I don't think you would get very good survey results.

– benc
Nov 13 '18 at 8:40





I know you want the table to have the rows and columns, but when you use the radio buttons that way, the horizontal row shading implies the radio buttons are related on the horizontal axis. However, you are really asking them to just pick "one-of-each-column". Even if we gave you JS that did what you wanted, I don't think you would get very good survey results.

– benc
Nov 13 '18 at 8:40













Apologize all. I am very new at this. I have provided a sample code for your reference. Again, I apologize.

– Mursid Rahman
Nov 14 '18 at 2:47





Apologize all. I am very new at this. I have provided a sample code for your reference. Again, I apologize.

– Mursid Rahman
Nov 14 '18 at 2:47












2 Answers
2






active

oldest

votes


















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>








share|improve this answer


























  • Hi Chris Happy, Thank you so much for the solution. How do I make the ranking condition possible? Let's say the first column radio is Rank 1 and so forth. So if user has already chosen first column radio for Instagram, they cant choose it again for other social apps. Thank you

    – Mursid Rahman
    Nov 14 '18 at 3:14













  • @MursidRahman I've updated my answer. I hope it meets your requirements. God bless :)

    – Chris Happy
    Nov 14 '18 at 3:25











  • OMG Chris! Thank you so much!! That works gorgeously!

    – Mursid Rahman
    Nov 14 '18 at 3:33






  • 1





    Looks like I was too slow. Good work @ChrisHappy

    – Harvey A. Ramer
    Nov 14 '18 at 3:36








  • 1





    @HarveyA.Ramer Harsh. Yeah, there's a struggle between quality and speed.

    – Chris Happy
    Nov 14 '18 at 15:14





















0














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>








share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53276731%2flimit-the-number-of-response-by-user-using-javascript%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    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>








    share|improve this answer


























    • Hi Chris Happy, Thank you so much for the solution. How do I make the ranking condition possible? Let's say the first column radio is Rank 1 and so forth. So if user has already chosen first column radio for Instagram, they cant choose it again for other social apps. Thank you

      – Mursid Rahman
      Nov 14 '18 at 3:14













    • @MursidRahman I've updated my answer. I hope it meets your requirements. God bless :)

      – Chris Happy
      Nov 14 '18 at 3:25











    • OMG Chris! Thank you so much!! That works gorgeously!

      – Mursid Rahman
      Nov 14 '18 at 3:33






    • 1





      Looks like I was too slow. Good work @ChrisHappy

      – Harvey A. Ramer
      Nov 14 '18 at 3:36








    • 1





      @HarveyA.Ramer Harsh. Yeah, there's a struggle between quality and speed.

      – Chris Happy
      Nov 14 '18 at 15:14


















    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>








    share|improve this answer


























    • Hi Chris Happy, Thank you so much for the solution. How do I make the ranking condition possible? Let's say the first column radio is Rank 1 and so forth. So if user has already chosen first column radio for Instagram, they cant choose it again for other social apps. Thank you

      – Mursid Rahman
      Nov 14 '18 at 3:14













    • @MursidRahman I've updated my answer. I hope it meets your requirements. God bless :)

      – Chris Happy
      Nov 14 '18 at 3:25











    • OMG Chris! Thank you so much!! That works gorgeously!

      – Mursid Rahman
      Nov 14 '18 at 3:33






    • 1





      Looks like I was too slow. Good work @ChrisHappy

      – Harvey A. Ramer
      Nov 14 '18 at 3:36








    • 1





      @HarveyA.Ramer Harsh. Yeah, there's a struggle between quality and speed.

      – Chris Happy
      Nov 14 '18 at 15:14
















    1












    1








    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>








    share|improve this answer















    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>








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





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






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 14 '18 at 3:25

























    answered Nov 14 '18 at 3:02









    Chris HappyChris Happy

    4,61811133




    4,61811133













    • Hi Chris Happy, Thank you so much for the solution. How do I make the ranking condition possible? Let's say the first column radio is Rank 1 and so forth. So if user has already chosen first column radio for Instagram, they cant choose it again for other social apps. Thank you

      – Mursid Rahman
      Nov 14 '18 at 3:14













    • @MursidRahman I've updated my answer. I hope it meets your requirements. God bless :)

      – Chris Happy
      Nov 14 '18 at 3:25











    • OMG Chris! Thank you so much!! That works gorgeously!

      – Mursid Rahman
      Nov 14 '18 at 3:33






    • 1





      Looks like I was too slow. Good work @ChrisHappy

      – Harvey A. Ramer
      Nov 14 '18 at 3:36








    • 1





      @HarveyA.Ramer Harsh. Yeah, there's a struggle between quality and speed.

      – Chris Happy
      Nov 14 '18 at 15:14





















    • Hi Chris Happy, Thank you so much for the solution. How do I make the ranking condition possible? Let's say the first column radio is Rank 1 and so forth. So if user has already chosen first column radio for Instagram, they cant choose it again for other social apps. Thank you

      – Mursid Rahman
      Nov 14 '18 at 3:14













    • @MursidRahman I've updated my answer. I hope it meets your requirements. God bless :)

      – Chris Happy
      Nov 14 '18 at 3:25











    • OMG Chris! Thank you so much!! That works gorgeously!

      – Mursid Rahman
      Nov 14 '18 at 3:33






    • 1





      Looks like I was too slow. Good work @ChrisHappy

      – Harvey A. Ramer
      Nov 14 '18 at 3:36








    • 1





      @HarveyA.Ramer Harsh. Yeah, there's a struggle between quality and speed.

      – Chris Happy
      Nov 14 '18 at 15:14



















    Hi Chris Happy, Thank you so much for the solution. How do I make the ranking condition possible? Let's say the first column radio is Rank 1 and so forth. So if user has already chosen first column radio for Instagram, they cant choose it again for other social apps. Thank you

    – Mursid Rahman
    Nov 14 '18 at 3:14







    Hi Chris Happy, Thank you so much for the solution. How do I make the ranking condition possible? Let's say the first column radio is Rank 1 and so forth. So if user has already chosen first column radio for Instagram, they cant choose it again for other social apps. Thank you

    – Mursid Rahman
    Nov 14 '18 at 3:14















    @MursidRahman I've updated my answer. I hope it meets your requirements. God bless :)

    – Chris Happy
    Nov 14 '18 at 3:25





    @MursidRahman I've updated my answer. I hope it meets your requirements. God bless :)

    – Chris Happy
    Nov 14 '18 at 3:25













    OMG Chris! Thank you so much!! That works gorgeously!

    – Mursid Rahman
    Nov 14 '18 at 3:33





    OMG Chris! Thank you so much!! That works gorgeously!

    – Mursid Rahman
    Nov 14 '18 at 3:33




    1




    1





    Looks like I was too slow. Good work @ChrisHappy

    – Harvey A. Ramer
    Nov 14 '18 at 3:36







    Looks like I was too slow. Good work @ChrisHappy

    – Harvey A. Ramer
    Nov 14 '18 at 3:36






    1




    1





    @HarveyA.Ramer Harsh. Yeah, there's a struggle between quality and speed.

    – Chris Happy
    Nov 14 '18 at 15:14







    @HarveyA.Ramer Harsh. Yeah, there's a struggle between quality and speed.

    – Chris Happy
    Nov 14 '18 at 15:14















    0














    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>








    share|improve this answer




























      0














      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>








      share|improve this answer


























        0












        0








        0







        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>








        share|improve this answer













        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>








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





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






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 14 '18 at 3:33









        Harvey A. RamerHarvey A. Ramer

        654612




        654612






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53276731%2flimit-the-number-of-response-by-user-using-javascript%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            The Sandy Post

            Image
            The Sandy Post From Wikipedia, the free encyclopedia Jump to navigation Jump to search The Sandy Post Type Weekly Newspaper Format Tabloid Owner(s) Community Newspapers/Pamplin Media Group Publisher J. Mark Garber Editor Steve Brown Founded 1937  ( 1937 ) Headquarters Sandy, Oregon Circulation 3,800 Website www.pamplinmedia.com/sandy-post-home/ This article needs additional citations for verification . Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed. (February 2010) (Learn how and when to remove this template message) The Sandy Post is a weekly newspaper, published in Sandy, Oregon, United States. The paper, founded in 1937, serves the communities of Sandy, Boring, the Villages at Mount Hood and the surrounding areas. The newspaper is owned by Community Newspapers/Pamplin Media Group, a company of ...
            Read more

            Danny Elfman

            Image
            Danny Elfman From Wikipedia, the free encyclopedia Jump to navigation Jump to search Danny Elfman Elfman at the 2010 San Diego Comic-Con Born Daniel Robert Elfman ( 1953-05-29 ) May 29, 1953 (age 65) Los Angeles, California, U.S. Spouse(s) Bridget Fonda ( m.  2003) Children 1 Musical career Genres Rock [1] ska [2] new wave film music video game music Occupation(s) Composer, singer, songwriter, record producer Instruments Trombone guitar percussion vocals keyboards [3] Years active 1972–present Associated acts Oingo Boingo James Newton Howard Daniel Robert Elfman (born May 29, 1953) is an American composer, singer, songwriter, and record producer. Elfman first became known for being the lead singer and songwriter for the band Oingo Boingo from 1974 to 1995. He is well known for scoring films and television shows, particularly his frequent collabora...
            Read more

            Pages that link to "Head v. Amoskeag Manufacturing Co."

            Image
            Help Pages that link to "Head v. Amoskeag Manufacturing Co." ← Head v. Amoskeag Manufacturing Co. Jump to navigation Jump to search What links here Page:   Namespace:  all (Article) Talk User User talk Wikipedia Wikipedia talk File File talk MediaWiki MediaWiki talk Template Template talk Help Help talk Category Category talk Portal Portal talk Book Book talk Draft Draft talk TimedText TimedText talk Module Module talk Gadget Gadget talk Gadget definition Gadget definition talk   Invert selection Filters Hide transclusions | Hide links | Hide redirects The following pages link to Head v. Amoskeag Manufacturing Co. External tools: Show redirects only View (previous 50 | next 50) (20 | 50 | 100 | 250 | 500) Amoskeag Manufacturing Company ‎ (links | edit) List of United States Supreme Court cases by the Waite Court ‎ (links | edit) Talk:Head v. Amoskeag Manuf...
            Read more