JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" class="" id="forenameCheck" name="forenameCheck">
<label for="forename" class="control-label">Forename</label>
<input type="text" class="form-control" id="forename" disabled="true" name="forename" placeholder="Forename">
<br>
<input type="checkbox" class="" id="surnameCheck" name="surnameCheck">
<label for="surname" class="control-label">Surname</label>
<input type="text" class="form-control" id="surname" disabled="true" name="surname" placeholder="Surname">

JavaScript

$("#forenameCheck").change(function() {
    var isDisabled = !$(this).is(":checked");
    $("#forename").prop("disabled", isDisabled);
});

$("#surnameCheck").change(function() {
    var isDisabled = !$(this).is(":checked");
    $("#surname").prop("disabled", isDisabled);
});