如何在页面加载时根据选中的单选按钮禁用文本区域？

Question

I want to improve upon this script for disabling text areas by radio button selection. Currently when "yes" is selected the text areas should be disabled and enabled when "no" is selected.

What do I need to change so the text areas are disabled when the page first loads and if the correct radio button is checked?(yes is checked by default if no change has been made)

Please bare in mind this page will be refreshed and redirected to so I will need to check the actual selection on the radio buttons. I was just setting them to all be disabled on load before but this disabled text areas even when I had the correct radio button selected.

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/JQuery

    $(function () {

    var $choices = $(".group").find(":radio");
    $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');
        }
    });
});

Hope that's clear enough.

Answer 1

try

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

DEMO

Answer 2

Add the class attribute to your textarea

<div>
    <textarea data-trigger="choice1" rows="4" cols="20" class="group"></textarea>
    <textarea data-trigger="choice2" rows="4" cols="20" class="group"></textarea>
    <textarea data-trigger="choice3" rows="4" cols="20" class="group"></textarea>
</div>

in your script:-

$( document ).ready(function() {
 $("textarea.group").attr("disabled", true);
});