将单选按钮绑定到文本区域的唯一 ID？答案

【问题标题】：Unique Ids to bind radio buttons to text areas?将单选按钮绑定到文本区域的唯一 ID？
【发布时间】：2015-06-26 23:21:49
【问题描述】：

我有一个带有多个是/否单选按钮和文本区域的表单，我想在选择是时禁用（“灰色”）并在选择否时启用。

我目前仅适用于第一个文本区域，所有其他单选按钮仅影响第一个文本区域，因为它们具有匹配的 id。

这是我正在使用的视图。

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

我知道我需要以某种方式为每对单选按钮生成唯一的 ID，并以某种方式将它们绑定到文本区域。这是我目前正在使用的脚本。

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

有什么好的方法来解决这个问题？我还是 javascript 的新手，所以对你所做的任何其他解释都会有所帮助。

【问题讨论】：

使用id中的i计数器id='"radio"'.i.'"'
使用类而不是 ID 并对每个集合进行分组，例如 <div class="group">radio, radio, text area</div>

标签： javascript jquery radio-button

【解决方案1】：

正如我在 cmets 中所说，您不需要拥有 ID，除非您在其他地方使用它们。您可以简单地拥有一个组，可能是一个DIV，其中包含一个类、单选按钮和文本区域作为组子项。你想要这样的东西吗？

$(function() {

    var $choices = $(".group").find(":radio");
    $choices.on("change", function() {
        var $this = $(this);
        var choice = $.trim( $this.val() );
        var tarea = $this.closest(".group").find("textarea");
        tarea.prop("readOnly", choice === "yes");
        if ( choice === "yes" ) {
            //do your stuff when val = yes
        } else {
            //do your stuff when val = no
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
    <input type="radio" name="choice1" value="yes" />Yes
    <input type="radio" name="choice1" value="no" />No
    <textarea rows="4" cols="20"></textarea>
</div>
<div class="group">
    <input type="radio" name="choice2" value="yes" />Yes
    <input type="radio" name="choice2" value="no" />No
    <textarea rows="4" cols="20"></textarea>
</div>
<div class="group">
    <input type="radio" name="choice3" value="yes" />Yes
    <input type="radio" name="choice3" value="no" />No
    <textarea rows="4" cols="20"></textarea>
</div>
<div class="group">
    <input type="radio" name="choice4" value="yes" />Yes
    <input type="radio" name="choice4" value="no" />No
    <textarea rows="4" cols="20"></textarea>
</div>

【讨论】：