JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row registerColumns">
    <div class="col-md-6 col-sm-6" style="border: 1px solid brown;">
        <div id="acceptBox" style="padding: 5px; margin: 5px; border: 1px solid black;">Accept
            <input type="checkbox" class="studentCheckbox" data-studentcheckboxid='@space.EventId'>
        </div>
    </div>
    <div class="col-md-6 col-sm-6" style="border: 1px solid red;">
        <input type='button' class="btn btn-primary disabled registerStudent" data-studentbuttonid='@space.EventId' style="padding: 5px; margin: 5px; border: 1px solid black;" value='Register Student' />
    </div>
</div>

JavaScript

$("input[type=checkbox]").on("click", function () {
    var id = $(this).data("studentcheckboxid");
    var button = $("div").find("[data-studentbuttonid='" + id + "']");

    if ($(this).is(':checked')) {
        $(button).prop('disabled', true);
    } else {
        $(button).prop('disabled', false);
    }
});
$("input").on("click", function () {
    alert('click');
});