如何在Jquery或js中设置最小值和最大值的限制

Question

I have this script for increment decrements value of a text box, it's working fine. Only thing I need to achieve is, I have to set a minimum and maximum value for it to decrements and increments receptively.

I don't need any alert n message to show the user, I just need it should not change the value after reaching to the limit.

  <script>
    $(document).ready(function(){
  $("#up").on('click',function(){
    $("#incdec input").val(parseInt($("#incdec input").val())+1);
   });

   $("#down").on('click',function(){
    $("#incdec input").val(parseInt($("#incdec input").val())-1);
   });

 });
 </script>

Answer 1

Demo

You can use following. Just set max and min value in data-max and data-min attribute in up and down buttons;

<input type="button" id="up" value="Up" data-max="5"/>
<input type="button" id="down" value="Down" data-min="0"/>

And in js;

$(document).ready(function() {
    $("#up").on('click',function(){
          if ($("#incdec").val() < $(this).data("max")) {
            $("#incdec").val(parseInt($("#incdec").val())+1);
          }
    });

    $("#down").on('click',function(){
          if ($("#incdec").val() > $(this).data("min")) {
            $("#incdec").val(parseInt($("#incdec").val())-1);
          }
    });
});

Edit: For image buttons : Demo 2

Edit2: How about if you creating that buttons dynamically more than once?

Let say you have generating buttons dynamically and generate an output like below;

<div>
    <input type="text" class="incdec" value="0"/>
    <input type="button" class="up" value="Up" data-max="5"/>
    <input type="button" class="down" value="Down" data-min="0"/>
</div>

<div>
    <input type="text" class="incdec" value="0"/>
    <input type="button" class="up" value="Up" data-max="5"/>
    <input type="button" class="down" value="Down" data-min="0"/>
</div>

....

And you can use following js:

$(document).ready(function() {
    $(".up").on('click',function(){
          var $incdec = $(this).parent().find(".incdec");
          if ($incdec.val() < $(this).data("max")) {
            $incdec.val(parseInt($incdec.val())+1);
          }
    });

    $(".down").on('click',function(){
          var $incdec = $(this).parent().find(".incdec");
          if ($incdec.val() > $(this).data("min")) {
            $incdec.val(parseInt($incdec.val())-1);
          }
    });
});