In the code provided below as Non-functional code [1], it will function correctly with siblings() to disable other input fields if their sum or amount exceeds a specified maximum value. This works effectively when all input fields are within the same parent element.
For instance:
<parent>
<child input>
<child input>
<child input>
<child input>
</parent>
If you follow the CODE ELEMENT STEPPING technique outlined above on the following code, it should work successfully.
Non-functional code [1]:
$('.variations input').on('change input mouseup keyup', function() {
var maxVal = 15; //Maximum value defined here
var sum = 0;
$('.variations input').each(function() {
sum += +$(this).val();
});
if (sum >= maxVal) { //Total cannot exceed 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>I am curious about how jQuery siblings() can be utilized for interactions with other child elements.
In real scenarios, I might need to traverse multiple table elements:
https://jsfiddle.net/L01uexv1/1/
Any suggestions regarding my actual code situation would be greatly appreciated. Thank you!