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.target ¹交互的元素，并且您可以使用parents 2 jQuery方法，从那里你可以在表单元素上调用find ³来专门访问其中的元素：

$('.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/

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

1 个答案: