CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-spinner
user4738771
user4738771

Reputation:

In a group of spinners, update other spinners max value on change of a spinner value

I have come across a scenario where we have three input spinners and initially the maximum value is set to 20 now if any of the spinner value is changed then the max value for other spinner should also change. example: there are three spinners spinner1, spinner2, spinner3 with max as 20, if initially spinner1 is set to 3 then spinner2 and spinner3 should be able to select maximum until 17, now is spinner2 is selected as 10 then spinner3 can only select a maximum of 7, now if spinner 1 is again changed to 1 then spinner2 and spinner3 should be able to select maximum of the remaining 20-(1+10) value.

Upvotes: -3

Views: 282

Answers (1)

Wesley Smith
Wesley Smith

Reputation: 19571

Honestly, this type of question is not really suited to SO. When a person comes here for help, we generally expect that they have made a reasonable attempt to write the code themselves but have run into a specific problem that they were unable to solve.

We also expect the asker to show the actual code they are having the issue with and to be able to articulate what the expected outcome of their code is as well as describe how their current attempt fails to meet the expectation.

With that said, I needed a break this morning so please see the below, it should do exactly what you need. Look through the code and if you have any questions about how something works, do feel free to ask:

$('.restrain').change(function(){
	var $this=$(this); // cache the spinner the user interacted with
    var $group=$(this).closest('.restrain-group'); // get the group that contains the spinner
    var maxAllowed=$group.data('restrain-group-max'); // get the group max from the data attribute on the container
    var $spinners=$.merge($group.find('.restrain').not(this), $this); // get all of the spinners for the current group, arrange the collection so that the current spinner is always last, this is VERY important
        
    var total=0; // store our running total
    $spinners.each(function(){
	    var $this=$(this); //cache the current spinner in the loop
        var curVal=Number($this.val()); // get the current spinner's value
        var newVal=total+curVal;// add the value to the running total
        if(newVal>maxAllowed){ // if the running  total is now higher than the maxAllowed, we've gone too high
            var adjustVal=newVal-maxAllowed; // figure out how much over the total we are
            var replacementVal=curVal-adjustVal; // subtract the overage from the current spinner's value
                replacementVal = replacementVal <0 ? 0 :replacementVal;
            $this.val(replacementVal); // set the current spinner to the lowered value
            curVal=replacementVal; 
        }
        total=total+curVal; // add the last value to the total before checking the next spinner
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="restrain-group" data-restrain-group-max="20">
    <input class="restrain" type="number" min="0"  step="2" value="6" size="6">
    <input class="restrain" type="number" min="0" step="2" value="6" size="6">
    <input class="restrain" type="number" min="0"  step="2" value="6" size="6">
</div>

Upvotes: 1

Related Questions