Question

I’m trying to create a jQuery spinner type thing earlier today somebody gave me this code which increases the text field value up/down on button clicks. Fantastic. But what do you do to disable the .desc button if the value is 0 – zero. In PHP very easy if if <=0 then this etc… but I don’t know jQuery..

Also any ideas how it can be used to move up/down an unordered html list i.e. ul li?

$(document).ready(function() 
{   
    $(function()
    {
        $(".inc").click(function() 
        { 
            $(":text[name='qty']").val(Number($(":text[name='qty']").val()) + 1);
        }); 

        $(".dec").click(function()
        {      
            $(":text[name='qty']").val(Number($(":text[name='qty']").val()) - 1);
        });  
    });
});

This uses a form:

<input type="text" name="qty" value="0" />
<img src="img/up.png" class="inc" width="20px" height="9px" alt="Increase" title="increase" />
<img src="img/down.png" class="dec" width="20px" height="9px" alt="Decrease" title="Decrease" />

Answer 1

here is my code,

$(document).ready(function () {
  var textElem = $(":text[name='qty']"),
      getTextVal = function() {
        var val = parseInt(textElem.val(), 10);
        return isNaN(val) ? 0 : val;
      };

  $(".inc").click(function () {
      textElem.val(getTextVal() + 1);
  });

  $(".dec").click(function(){
      if( getTextVal() == 0) {
         return false;
      }

      textElem.val(getTextVal() - 1);
  });
});

The image ‘.dec’ stops decrementing as the value of the text element reaches 0, you can dynamically add and remove the class name(s) to the image so that the user can notice the transition.

It is suggested to use buttons for this purpose and they can be styled with css to appear as required.

This is not the optimized code, but should give you an idea of how to get it working as per ur requirements.