限制用户只能从具有相同值的两组中选择一个单选按钮

Question

I am working on a web app where I am creating a virtual team. User can pick players and then select a "Captain" and a "Vice-Captain" of the team. To accomplish this I have created two radio button groups so that user can pick only one player as "Captain" and only one player as "Vice-Captain" of the team. My problem is that how can I restrict user from picking same player as Captain and Vice-Captain as both radio groups have different names and user can select one from each even if it is the same player. Here is a sample code in Laravel Blade of what I am trying to explain. You can suggest a solution using javascript or jquery.

    @foreach($players as $player)
    <tr>
      <td>
        <input type="checkbox" name="player[]" value="{{ $player->id }}">
      </td>
      <td>
        {{ $player->name }}
      </td>
      <td>
        {{ $player->category }}
      </td>
      <td>
        {{ $player->team }}
      </td>
    </tr>
    <tr class="table-borderless">
      <td colspan="2">
        <input type="radio" name="captain" value="{{ $player->id }}"> Captain
      </td>
      <td colspan="2">
        <input type="radio" name="vicecaptain" value="{{ $player->id }}"> Vice-Captain
      </td>
    </tr>
@endforeach

I want to restrict user from selecting both 'Captain' and 'Vice-Captain' radio buttons for the same player and want to show a helpful message to change one of the selection to a different player.

Answer 1

I solved my problem by following suggestions in the following question's answer

[ Compare radio button values using jquery

Thanks for looking.

Answer 2

Use Javascript to see checked value for captain. Use event listener to listen for value change on the captain group. Based on the checked value, disable that id from vicecaptain list.

Checking or querying dom elements will be easier if you gave the fields a data attribute or a unique class name or id.

Have the same backend validation too.