Question

我有一个表单，其中有多个是/否单选按钮和文本区域我想要禁用（＆＃34;灰色＆＃34;）当选择是时，并在选择否时启用。

我目前仅适用于第一个文本区域，所有其他单选按钮仅影响第一个文本区域，因为它们具有匹配的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的新手，所以对你正在做的事情的任何其他解释都会有所帮助。

Answer 1

正如我在评论中所说，除非您在别处使用，否则您不需要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>

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

1 个答案: