禁用多个单选按钮？答案

【问题标题】：Disable multiple radio buttons?禁用多个单选按钮？
【发布时间】：2015-04-21 17:35:37
【问题描述】：

我有一个问题表单，其中包含多个是/否单选按钮，每个按钮都有自己的文本区域，只有在为该特定问题选择“否”时才应启用。问题是我使用的设置仅适用于一个问题，因为匹配类。我还没有想出一个很好的方法来使每个单选按钮对唯一并且只影响它自己的文本区域。

我正在使用 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');
    }
});
})

有没有好的方法来解决这个问题？如果您需要更多详细信息，请告诉我。

（我以前问过这个问题，但觉得我的问题不够清楚）

【问题讨论】：

那是 .class1 抱歉
只是一个小想法，我认为更好的方法可能是为每个单选按钮（如“.radiogroup”）提供一个通用类，并将文本区域放置在与单选按钮相同的 div 内。通过这种方式，您可以监听每个单独的 .radiogroup 更改事件并获取 div 内的第一个文本区域。
只是一个示例 sn-p:jsfiddle.net/dsebwh7o 获取您的 HTML 并为所有单选按钮提供相同的类并解析相同 div 内的文本区域。要“触发”更改，您可以轻松地在当前 textarea 状态和 1 之间进行 BITWISE XOR，如果为 true，则返回 false，如果为 false，则返回 true。对于背景，应用完全相同的规则。
是的，这更有意义，我想我需要使用其他东西来代替

您仍然可以使用表格，只需将 textarea 放在 div 中即可；)

标签： javascript jquery asp.net radio-button

【解决方案1】：

在你的情况下，你可以做类似的事情

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

但是如果你在你的无线电输入、文本区域和它们的公共包装父类中添加一些公共类会更好。因此，您将能够使用基于该类而不是标签名称的选择器。

【讨论】：

好的，我试试看。