Disable multiple radio buttons?

Question

I have a question form with multiple yes/no radio buttons each with it's own textarea that should only be enabled whenever "No" is selected for that particular question. Problem is the setup up I'm using only works for one question because of matching classes. I haven't been able to come up with a nice way of making each radio button pair unique and only affect it's own textarea.

I'm using the counter variable to make different class names for each group but the script only affects .class1 I need to modify the script and would like some advice.

This is part of the view I'm using.

@for (int i = 0; i < Model.Questions.Count; i++)
        {
           <tr>
                <td>
                    <div>
                        @Html.RadioButtonFor(p => Model.Questions[i].AnswerSelected, true, new { @class = "class" + i, value = "yes" }) Yes
                        @Html.RadioButtonFor(p => Model.Questions[i].AnswerSelected, false, new { @class = "class" + i, value = "no" }) No
                    </div>
                </td>          
            <td>
                @Html.TextAreaFor(p => Model.Questions[i].ActionToTake, new { id = "text1" })
            </td>
        </tr>
    }

Bits of markup from inspect element

<div>
      <input checked="checked" class="class0" data-val="true" data-val-required="The AnswerSelected field is required." id="Questions_0__AnswerSelected" name="Questions[0].AnswerSelected" type="radio" value="True"> Yes
      <input class="class0" id="Questions_0__AnswerSelected" name="Questions[0].AnswerSelected" type="radio" value="False"> No
</div>
<div>
    <textarea class="text0" cols="20" id="text0" name="Questions[0].ActionToTake" rows="2"></textarea>
</div>
    <div>
      <input checked="checked" class="class1" data-val="true" data-val-required="The AnswerSelected field is required." id="Questions_1__AnswerSelected" name="Questions[1].AnswerSelected" type="radio" value="True"> Yes
      <input class="class1" id="Questions_1__AnswerSelected" name="Questions[1].AnswerSelected" type="radio" value="False"> No
</div>
    <textarea class="text1" cols="20" id="text1" name="Questions[1].ActionToTake" rows="2"></textarea>

and this is the script I'm using

$(document).ready(function() {
$(".class1").change(function (e) {
    if ($(this).val() === 'True') {
        $("#text1").prop('readonly', true);
        $("#text1").css('background-color', '#EBEBE4');
    } else if ($(this).val() === 'False') {
        $("#text1").prop('readonly', false);
        $("#text1").css('background-color', '#FFFFFF');
    }
});
})

Is there a good way to approach this? If you need more detail let me know.

(I've asked this before but felt I wasn't being clear enough in the question)

Answer 1

In your case you can do something like

$(':radio').change(function () {
    $(this).closest('tr').find('[class^="text"]').prop('readonly', $(this).val() === 'False');
});

But it would be better if you add some common class to your radio inputs, textareas and their common wrapper-parents. So you will be able to use selectors based on that classes but not tag names.