禁用多個單選按鈕？

Question

我有一個帶有多個“是/否”單選按鈕的問題表單，每個按鈕都有自己的文本區域，只有在為特定問題選擇“否”時才應啟用。 問題是由於匹配的類，我使用的設置僅對一個問題有效。 我還沒有想出一種使每個單選按鈕對唯一且僅影響其自己的textarea的好方法。

我正在使用counter變量為每個組創建不同的類名稱，但腳本僅影響.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');
});

但是，如果將一些通用類添加到您的無線電輸入，文本區域及其通用包裝父級中，效果會更好。 因此，您將能夠基於該類使用選擇器，但不能使用標簽名稱。