How to set limit for radio button choice in a table?

Question

There is a table with 4 columns. Each columns has some radio buttons. User can select only one radio button from each column. As there is 4 columns in a table, so user can select 4 radio buttons from this table. But I want to give limit for the radio button selection. I want that user can select only 3 radio button from this table out of 4.If user want to select number 4, there will be an alert "You can not select more than three."

Is it possible to set limit here? How can I set this limit?

Answer 1

 $("input[type='radio']").change(function(){ var count = $("input[type='radio']:checked").length; if(count>3){ $(this).prop('checked', false); alert("You cannot add more than 3"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="radioName1" value="1"> 1 <br> <input type="radio" name="radioName1" value="2"> 2 <br> <input type="radio" name="radioName1" value="3"> 3 <br> <hr> <input type="radio" name="radioName2" value="1"> 1 <br> <input type="radio" name="radioName2" value="2"> 2 <br> <input type="radio" name="radioName2" value="3"> 3 <br> <hr> <input type="radio" name="radioName3" value="1"> 1 <br> <input type="radio" name="radioName3" value="2"> 2 <br> <input type="radio" name="radioName3" value="3"> 3 <br> <hr> <input type="radio" name="radioName4" value="1"> 1 <br> <input type="radio" name="radioName4" value="2"> 2 <br> <input type="radio" name="radioName4" value="3"> 3 <br> 

Answer 2

You may store the selected radio name in an array and programmatically remove the oldest when the number of selected groups of radio buttons exceeds 3.

 $(document).ready(function() { var radioSelected = []; var numberOfSelected = null; $('input[type=radio]').change(function() { numberOfSelected = $('input[type=radio]:checked').length; var name = $(this)[0].name; if (radioSelected.indexOf(name) == -1) { radioSelected.push($(this)[0].name); } if(radioSelected.length > 3) { var removed = radioSelected.shift(); $('input[name=' + removed + ']').prop('checked', false); } }); }); 

 .column { float: left; margin-right: 40px; display: flex; flex-flow: column; padding: 1em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="column"> <div><input type="radio" name="one" value="i" /> i</div> <div><input type="radio" name="one" value="ii"/> ii</div> <div><input type="radio" name="one" value="iii"/> iii</div> </div> <div class="column"> <div><input type="radio" name="two" /> A</div> <div><input type="radio" name="two" /> B</div> <div><input type="radio" name="two" /> C</div> </div> <div class="column"> <div><input type="radio" name="three" /> 1</div> <div><input type="radio" name="three" /> 2</div> <div><input type="radio" name="three" /> 3</div> </div> <div class="column"> <div><input type="radio" name="four" /> a</div> <div><input type="radio" name="four" /> b</div> <div><input type="radio" name="four" /> c</div> </div>