Clay Hayes Clay Hayes - 1 month ago 9
HTML Question

Validating sets of radio buttons a second time?

I'm making a form asking users about a tournament. I need to limit each placement to only having one team and vise versa. I have the latter figured out already. But I'm having trouble thinking of a way to further validate the radio buttons. The set is in a 4x4 grid and each column and row should only have one value. I can get the teams validation to work by naming the buttons the same but I can't find a way to validate the placement. I had a way to validate checkboxes but I need to use radio buttons so I can have what order users place each checked box so I can read what teams are placed in 1st and 2nd in each group.

The way the teams, placement, and button are laid out is within a table.

<form>
<table class="groupSeating" cellspacing="2">
<caption>Group Seating</caption>

<colgroup>
<col class="groups" />
<col class="teams" />
<col class="seating" span="4" />
</colgroup>

<tr>
<th rowspan="2" colspan="2"></th>
<th colspan="4">Seating</th>
</tr>
<tr>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
<td>4th</td>
</tr>
<tr>
<td rowspan="4">Group A</td>
<td>ROX Tigers</td>
<td>
<input type="radio" name="roxSeed" id="ROX1" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX2" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX3" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX4" value="ROX" />
</td>
</tr>
<tr>
<td>G2 Esports</td>
<td>
<input type="radio" name="g2Seed" id="G21" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G22" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G23" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G24" value="G2" />
</td>
</tr>
<tr>
<td>Counter Logic Gaming</td>
<td>
<input type="radio" name="clgSeed" id="CLG1" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG2" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG3" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG4" value="CLG" />
</td>
</tr>
<tr>
<td>Albux Nox Luna</td>
<td>
<input type="radio" name="anxSeed" id="ANX1" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX2" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX3" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX4" value="ANX" />
</td>
</tr>
</table>
</form>


There is probably a cleaner way for my code but I'm not worried about that, it's for a school project. I tried taking bits from another js that was for checkboxes but I can't think of what to change.

var limit = 2;

$('input.singleCheckbox').on('change', function(evt) {
if ($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});

Answer

Is this what you're looking for?

https://jsfiddle.net/277uu501/2/

var reject = false;

$('input[type="radio"]')
  .mouseup(function(){
    var selectedValues = [];
    $('input[type="radio"]:checked').each(function(){
      selectedValues.push($(this).parent().index());
    });

    var selectedValue = $(this).parent().index();
    reject = selectedValues.indexOf(selectedValue) != -1;
  })

  .change(function(){
    if(reject) this.checked = false;
  });
Comments