javascript - 我们如何通过不在同一个父元素中使用 jQuery siblings()？

Question

从我下面的无效代码 [1]，它可以很好地与 siblings() 一起工作，以在总和或数量大于时禁用其他输入字段最大值，如果所有输入字段都在同一个父元素中。

例如:

<parent>
  <child input>
  <child input>
  <child input>
  <child input>
</parent>

如果您尝试CODE ELEMENT STEPPING到下面的代码，代码可以工作。

代码无效 [1]:

$('.variations input').on('change input mouseup keyup', function() {

  var maxVal = 15; //Here is maximim value
  var sum = 0;

  $('.variations input').each(function() {
    sum += +$(this).val();
  });

  if (sum >= maxVal) { //amount in any fields can't greater than maxVal
    $(this).siblings().not(this).prop('disabled', true);
  } else {
    $(this).siblings().not(this).prop('disabled', false);
  }
});

HTML:

<div class="variations">
  <input type="number" name="sRewards" value="" class="inputReward" />
</div>
<div class="variations">
  <input type="number" name="sReward1" value="" class="inputReward" />
</div>
<div class="variations">
  <input type="number" name="sReward2" value="" class="inputReward" />
</div>
<div class="variations">
  <input type="number" name="sReward3" value="" class="inputReward" />
</div>

所以我想知道我们如何使用 jQuery siblings() 来处理其他子元素。

对于实际情况，我可能会通过使用大量表格元素来调用许多步骤:

https://jsfiddle.net/L01uexv1/1/

如果有人在我的真实情况代码上也建议我，我会更高兴。 多谢!

Answer 1

首先，您必须使用 .parent() 函数并找到 sibling 的所有“输入”元素，然后使用 .prop() 函数禁用它们.

$('.variations input').on('change', function() {

  var maxVal = 15; //Here is maximim value
  var sum = 0;

  $('.variations input').each(function() {
    sum += +$(this).val();
  });

  if (sum >= maxVal) {
    $(this).parent().siblings().find('input').prop('disabled', true);
  } else {
    $(this).parent().siblings().find('input').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="variations">
  <input type="number" name="sRewards" value="" class="inputReward" />
</div>
<div class="variations">
  <input type="number" name="sReward1" value="" class="inputReward" />
</div>
<div class="variations">
  <input type="number" name="sReward2" value="" class="inputReward" />
</div>
<div class="variations">
  <input type="number" name="sReward3" value="" class="inputReward" />
</div>