JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

function valueChanged() {

    if ($("#forenameCheck").is(":checked")) {
        $("#forename").prop("disabled", false);
    } else {
        $("#forename").prop("disabled", true);
    }


    if ($("#surnameCheck").is(":checked")) {
        $("#surname").prop("disabled", false);
    } else {
        $("#surname").prop("disabled", true);
    }


}