当页面上有多个表单时，如何与特定表单（动态创建）进行交互？

Question

我有一个页面，其中包含多个基于用户输入动态创建的表单，因此页面只能有一个表单或多个表单。表单由两组单选按钮组成，第二组默认情况下处于禁用状态，并根据第一组单选按钮中的用户选项启用。

当用户从第一个问题中做出适当的选择时，第二个问题可用，这部分工作得非常好。但是，这同时适用于所有表格，因此当在表格1上进行选择时，所有其他表格都会根据表格1的输入做出反应。

每个表单都有一个使用数据库中的id的动态类，那么如何告诉jquery用户正在与哪个表进行交互？那么当用户在一个表单上做出选择时，它只影响该特定表单上的第二组问题？

$(document).ready(function() {
  $('.mealSection').prop('disabled', true).css('opacity', '.2');

  $('.attendRadio').change(function() {
    if ($(this).val() === "Attending") {
      $(".mealSection").prop('disabled', false).css('opacity', '1');
    } else {

      $(".mealSection .mealRadio").prop('checked', false);
      $('.mealSection').prop('disabled', true).css('opacity', '.2');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="processRSVP.php" method="post" class="rsvpForm[<? echo $r['GuestID']; ?>]">
  <fieldset class="attendSection">
    <input type="hidden" value="<? echo $r['GuestID']; ?>" name="id">
    <div class="attendOption">
      <input class="attendRadio" type="radio" name="attend[<? echo $r['GuestID']; ?>]" value="Attending">Hell Yeah!
    </div>
    <div class="attendOption">
      <input class="attendRadio" type="radio" name="attend[<? echo $r['GuestID']; ?>]" value="Not Attending">...Nah
    </div>
  </fieldset>
  <fieldset class="mealSection">
    <div class="mealOption">
      <input class="mealRadio" type="radio" name="starter[<? echo $r['GuestID']; ?>]" value="Option 1">Option 1
    </div>
    <div class="mealOption">
      <input class="mealRadio" type="radio" name="starter[<? echo $r['GuestID']; ?>]" value="Option 2">Option 2
    </div>
  </fieldset>
  <div class="rsvpButtonContainer">
    <input type="submit" name="<? echo $r['GuestID']; ?>" value="confirm">
  </div>
</form>
<form action="processRSVP.php" method="post" class="rsvpForm[<? echo $r['GuestID']; ?>]">
  <fieldset class="attendSection">
    <input type="hidden" value="<? echo $r['GuestID']; ?>" name="id">
    <div class="attendOption">
      <input class="attendRadio" type="radio" name="attend[<? echo $r['GuestID']; ?>]" value="Attending">Hell Yeah!
    </div>
    <div class="attendOption">
      <input class="attendRadio" type="radio" name="attend[<? echo $r['GuestID']; ?>]" value="Not Attending">...Nah
    </div>
  </fieldset>
  <fieldset class="mealSection">
    <div class="mealOption">
      <input class="mealRadio" type="radio" name="starter[<? echo $r['GuestID']; ?>]" value="Option 1">Option 1
    </div>
    <div class="mealOption">
      <input class="mealRadio" type="radio" name="starter[<? echo $r['GuestID']; ?>]" value="Option 2">Option 2
    </div>
  </fieldset>
  <div class="rsvpButtonContainer">
    <input type="submit" name="<? echo $r['GuestID']; ?>" value="confirm">
  </div>
</form>

我得到的是，我的jquery正在做的就是等待第一个单选按钮上的状态改变，并且它不关心改变来自哪个形式。我尝试过使用焦点，但我的理解是只能使用表单元素而不是实际表单本身？我试过循环遍历每个表单，但这似乎也不起作用，虽然我有一种感觉，我只是把它弄错了。

任何帮助都非常感谢，只要在正确的方向上轻推就会很棒。

Answer 1

如果你的回调接受一个事件参数，你可以访问用户与event.target1交互的元素，你可以使用parents2 jQuery方法访问包含的表单，然后你可以在表单元素上调用find3来专门访问其中的元素：

$('.attendRadio').change(function(event) {
  var formEl = $(event.target).parents('form');

  if ($(this).val() === "Attending") {
    formEl.find(".mealSection").prop('disabled', false).css('opacity', '1');
  } else {
    formEl.find(".mealSection .mealRadio").prop('checked', false);
    formEl.find('.mealSection').prop('disabled', true).css('opacity', '.2');
  }
});

[1] https://developer.mozilla.org/en-US/docs/Web/API/Event/target [2] https://api.jquery.com/parents/ [3] https://api.jquery.com/find/