JSFiddle - React, Tailwind, and code Playground

HTML

<div class="group">
    <input type="radio" name="choice1" value="yes" checked/>Yes
    <input type="radio" name="choice1" value="no" />No
</div>
<div class="group">
    <input type="radio" name="choice2" value="yes" checked/>Yes
    <input type="radio" name="choice2" value="no" />No
</div>
<div class="group">
    <input type="radio" name="choice3" value="yes" checked/>Yes
    <input type="radio" name="choice3" value="no" />No
    
</div>
    
<div>
    <textarea data-trigger="choice1" rows="4" cols="20"></textarea>
    <textarea data-trigger="choice2" rows="4" cols="20"></textarea>
    <textarea data-trigger="choice3" rows="4" cols="20"></textarea>
</div>

JavaScript

function checkChoices() {
    var choices = $(".group").find(":radio");

    choices.on("change", function () {
        var self = $(this);
        var choiceName = self.attr('class');

        var tarea = $('[datatrigger="' + choiceName + '"]');
        if (self.val() === "True") {
            tarea.val('');
            tarea.prop('readonly', true);
            tarea.css('background-color', '#EBEBE4');
        } else {
            tarea.prop('readonly', false);
            tarea.css('background-color', '#FFFFFF');
        }
    });
};