JSFiddle - React, Tailwind, and code Playground

HTML

<form> <span>
        <label for="qualifier">Type NO into the box and then deselect the checkbox. It won't be available for deselect until you do.</label>
        <input type="text" name="qualifier" class="qualifier" />
    </span>
 <span>
        <input class="special disabled" type="checkbox" onclick="event.preventDefault();" checked="checked" /> YES!
    </span>

</form>

CSS

form, span, .qualifier {
    display:block;
    margin:10px;
}
.disabled {
    opacity:0.5;
}

JavaScript

$(document).ready(function () {

    // Check to see if NO is in the box on change
    // NOTE: I'm not checking for capitalization in this example so type it in caps
    $('.qualifier').change(function () {
        var thisOne = $(this);

        if (thisOne.val() == 'NO') {
            $('.special')
                .prop({
                onclick: ""
            })
                .removeClass("disabled");
        } else {
            $('.special')
                .attr({
                checked: "checked",
                onclick: "event.preventDefault();"
            })
                .addClass("disabled");
        }
    });

});