JSFiddle - React, Tailwind, and code Playground

HTML

<form method="GET" id="players">
    <label><input type="checkbox" value="1"> Joueur 1</label>
    <label><input type="checkbox" value="2"> Joueur 2</label>
    <label><input type="checkbox" value="3"> Joueur 3</label>
    <label><input type="checkbox" value="4"> Joueur 4</label>
    <label><input type="checkbox" value="5"> Joueur 5</label>
    <label><input type="checkbox" value="6"> Joueur 6</label>
    <label><input type="checkbox" value="7"> Joueur 7</label>
    <label><input type="checkbox" value="8"> Joueur 8</label>
    <label><input type="checkbox" value="9"> Joueur 9</label>
    <label><input type="checkbox" value="10"> Joueur 10</label>
    <label><input type="checkbox" value="11"> Joueur 11</label>
    <button id="submit_form" disabled="disabled">Draft</button>
</form>
<div id="result"></div>

CSS

label { display: block; }
div { white-space: pre-wrap; }

JavaScript

var MAX_CHECK = 8;
var form = document.getElementById('players');
var submit = form.getElementById('submit_form');
form.onchange = function () {
    var checkboxes = form.getElementsByTagName('input'), check_count = 0, unchecked = [];
    for (var i=0; i<checkboxes.length; ++i) {
        var checkbox = checkboxes[i];
        if (checkbox.checked) {
            check_count++;
        } else {
            unchecked.push(checkbox);
        }
    }

    submit.disabled = check_count < MAX_CHECK;
    for (var j = 0; j<unchecked.length; ++j) {
        unchecked[j].disabled = check_count >= MAX_CHECK;
    }
};
form.onsubmit = function () {
    var checkboxes = form.getElementsByTagName('input');
    var t1 = [], t2 = [];
    for (var i=0; i<checkboxes.length; ++i) {
        if (!checkboxes[i].checked) { continue; }
        if (t1.length >= (MAX_CHECK / 2)) {
            t2.push(checkboxes[i].value);
        } else if (t2.length >= (MAX_CHECK / 2)) {
            t1.push(checkboxes[i].value);
        } else {
            Math.random() < 0.5
                ? t1.push(checkboxes[i].value)
                : t2.push(checkboxes[i].value);            
        }
    }
    document.getElementById('result').textContent =
        'Team 1: ' + t1.join(', ') +
        '\nTeam 2: ' + t2.join(', ');
    // preventDefault and stopPropagation
    return false;
};