Javascript Bootstrap randomize checkboxes

I have the following situation I can not solve. I would be very thankful if anyone had an idea:

My webpage contains a table of players. Each line (player) contains two checkboxes: One that selects if the player is active (checked) or not, the other which team he/she belongs to (checked=Team 1; unchecked=Team 2).

So each line looks sth like this:

<tr>
    <td><input id="plyr2_active" type="checkbox" name="plyr_active[]" value="2"></td>
    <td><input type="checkbox" id="plyr2_team" name="plyr_team[2]" data-on-color="danger" data-off-color="success" data-on-text="RED" data-off-text="GREEN" checked value="1"></td>
</tr>

I'd like to add a button that, when clicked, will run a function that randomizes the teams of the ACTIVE players. Meaning that the players will be shuffled and half of them belong to one, the other half to the other team.

What I tried: Get all checkbox states in an array, then shuffle() the array and try to change the checked-state via bootstrap. Miserably failed :-(

Any help will be much appreciated. Thanks!!