Checkbox not clickable on Internet explorer & Edge

I have a problem with checkboxes that don't trigger on Internet Explorer and Edge.

Here is the page with the anchor to the checkbox. The checkbox is the one that reads "Je certifie que je suis actuellement étudiant post bac et que j'ai lu et que j'accepte les conditions d'utilisation"

The HTML (generated using rails f.check_box(:terms))

<div class="media-left">
    <label class="terms-checkbox-label">
        <input name="user[terms]" value="0" type="hidden">
        <input onchange="canSubmitIfTermsAccepted(this)" value="1" name="user[terms]" id="user_terms" type="checkbox">
        <span class="checkbox-box"></span>
    </label>
</div>

CSS (although I believe it's irrelevant here)

input[type="checkbox"], input[type="radio"] {
    display: block;
    height: 0;
    overflow: hidden;
    position: absolute;
    visibility: hidden;
    width: 0;
}
[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
// below simplified selector for checked
input[type="checkbox"]:checked ~.checkbox-box::after {
    background: #00afec none repeat scroll 0 0;
    border-radius: 2px;
    content: "";
    height: 12px;
    left: 3px;
    top: 3px;
    width: 12px;
}

The function canSubmitIfTermsAccepted(this) just enables/disables the validate button if the terms checkbox is not checked, I don't believe it's relevant here.

Anyone got a clue what's happening ? Could it be because of the double input inside the label ?