JSFiddle - React, Tailwind, and code Playground

HTML

<h1> Question  </h1>

<p>What is the best color to wear after dark?</p>
<form>
    <label>
        <input type="checkbox" name="q4" class="grey"></input>grey</label>
    <label>
        <input type="checkbox" name="q4" class="black"></input>black</label>
    <label>
        <input type="checkbox" name="q4" class="white"></input>white</label>
    <label>
        <input type="checkbox" name="q4" class="red"></input>red</label>
    <label>
        <input type="checkbox" name="q4" id="correct"></input>reflective yellow</label>
    <br />
    <button class="submit4">Submit</button>
</form>

JavaScript

$(function () {
    //variable of correct answers	
    var rules = ['correct'];

    //force checkboxes to work like radio buttons
    var boxes = $("input[name=q4]:checkbox").click(function () {
        boxes.not(this).attr('checked', false);
    });



    $('.submit4').click(function (e) {
        e.preventDefault();
        //check correct answers from var above
        if ($('input[name=q4]:checked').map(function (i, v) {
            return v.id;
        }).get().join(',') == rules[0]) {
            alert("Correct! Reflective colors should make you more visible at night");

        } else {

            $('.grey:checked').attr('disabled', 'disabled').removeAttr('checked');
            alert("grey is wrong... it might not be bright enough.");
        }



    });
});