Отключить несколько переключателей?

Question

У меня есть форма вопроса с несколькими переключателями да/нет, каждый со своим собственным текстовым полем, который должен быть включен только тогда, когда для этого конкретного вопроса выбрано «Нет». Проблема в настройке, которую я использую, работает только для одного вопроса из-за соответствия классов. Я не смог придумать хороший способ сделать каждую пару переключателей уникальной и повлиять только на собственную текстовую область.

Я использую переменную счетчика, чтобы создавать разные имена классов для каждой группы, но сценарий влияет только на .class1. Мне нужно изменить скрипт и получить некоторые советы.

Это часть представления, которое я использую.

@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> 
    } 

Биты разметки от инспектировать элемент

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

и это скрипт я использую

$(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'); 
    } 
}); 
}) 

Есть хороший способ приблизиться к этому? Если вам нужно больше деталей, дайте мне знать.

(я спросил об этом раньше, но чувствовал я не был достаточно ясен в этом вопросе)

Answer 1

В вашем случае вы можете сделать что-то вроде

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

Но это было бы лучше, если бы вы добавили некоторый общий класс к вашим радиовводам, текстовым полям и их общим родителям-оберткам. Таким образом, вы сможете использовать селекторы на основе этих классов, но не имена тегов.