JSFiddle - React, Tailwind, and code Playground

HTML

<div class="group">
    <input type="radio" name="choice1" value="yes" />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

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

$(".group").find(":radio[value=yes]:checked").each(function () {
    $('[data-trigger="' + $(this).attr("name") + '"]').prop('readonly', true).css('background-color', '#EBEBE4');
});

$choices.on("change", function () {
    var $this = $(this);
    var choiceName = $this.attr('name');
    var tarea = $('[data-trigger="' + choiceName + '"]');
    if ($this.val() === "yes") {
        tarea.val('');
        tarea.prop('readonly', true);
        tarea.css('background-color', '#EBEBE4');
    } else {
        tarea.prop('readonly', false);
        tarea.css('background-color', '#FFFFFF');
    }
});