title: Disable plus/minus buttons if number input max/minus attribute is reached
body: <p>I'm working on a WooCommerce project. For those unfamiliar with WooCommerce, it sports a lot of number inputs with dynamically-added corresponding +/- buttons to control the quantity of a product you're adding to the cart. What I'm trying to do is disable the +/- buttons when the number input reaches its <code>max</code> or <code>min</code> attribute. If no <code>max</code> or <code>min</code> attribute is set, min should default to 0 and max to 999. On page load, if the number input <code>value</code> starts out at the <code>min</code> or a <code>max</code> (or a the fallback if neither <code>min</code> or <code>max</code> is set), the appropriate button should be disabled immediately without waiting for <code>.change()</code> on the number input to be fired.</p>
  
  <p><strong>HTML</strong> (pre buttons added)</p>
  
  <pre><code>&lt;div class="quantity"&gt;
      &lt;input type="number" step="1" max="20" name="" value="1" class="qty"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>HTML</strong> (post buttons added)</p>
  
  <pre><code>&lt;div class="quantity buttons_added"&gt;
      &lt;input type="button" value="-" class="minus"&gt;
      &lt;input type="number" step="1" max="20" name="" value="1" class="qty"&gt;
      &lt;input type="button" value="+" class="plus"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>WooCommerce JS</strong></p>
  
  <pre><code>$("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass('buttons_added').append('&lt;input type="button" value="+" class="plus" /&gt;').prepend('&lt;input type="button" value="-" class="minus" /&gt;');
  
  $("input.qty:not(.product-quantity input.qty)").each(function () {
      var min = parseFloat($(this).attr('min'));
  
      if (min &amp;&amp; min &gt; 0 &amp;&amp; parseFloat($(this).val()) &lt; min) {
          $(this).val(min);
      }
  });
  
  $(document).on('click', '.plus, .minus', function () {
  
      var $qty = $(this).closest('.quantity').find(".qty");
      var currentVal = parseFloat($qty.val());
      var max = parseFloat($qty.attr('max'));
      var min = parseFloat($qty.attr('min'));
      var step = $qty.attr('step');
  
      if (!currentVal || currentVal == "" || currentVal == "NaN") currentVal = 0;
      if (max == "" || max == "NaN") max = '';
      if (min == "" || min == "NaN") min = 0;
      if (step == 'any' || step == "" || step == undefined || parseFloat(step) == "NaN") step = 1;
  
      if ($(this).is('.plus')) {
          if (max &amp;&amp; (max == currentVal || currentVal &gt; max)) {
              $qty.val(max);
          } else {
              $qty.val(currentVal + parseFloat(step));
          }
      } else {
          if (min &amp;&amp; (min == currentVal || currentVal &lt; min)) {
              $qty.val(min);
          } else if (currentVal &gt; 0) {
              $qty.val(currentVal - parseFloat(step));
          }
      }
  
      $qty.trigger('change');
  });
  </code></pre>
  
  <p><strong>My JS</strong>  </p>
  
  <pre><code>$.fn.disableNumberButtons = function () {
      var value = this.val();
  
      var minus = this.prev();
      var minAttr = this.attr('min'); 
      var min = (minAttr) ? minAttr : 0;
      (value &gt; min) ? minus.removeClass('is-disabled') : minus.addClass('is-disabled');
  
      var plus = this.next();
      var maxAttr = this.attr('max');
      var max = (maxAttr) ? maxAttr : 999;
      (value &lt; max) ? plus.removeClass('is-disabled') : plus.addClass('is-disabled');
  }
  
  $('input.qty').each(function () {
      $(this).disableNumberButtons();
  });
  
  $('input.qty').change(function () {
      $(this).disableNumberButtons();
  });
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>If I increase the value of <code>input[type="number"]</code> to between 3 and 10 it disables the plus button. Once I get the value above 10, it re-enables it until the value reaches 20, the value of the <code>max</code> attribute, where it should be disabled. What gives?</p>
  
  <p>Live demo: <a href="http://jsfiddle.net/galengidman/a4RjS/" rel="nofollow">http://jsfiddle.net/galengidman/a4RjS/</a></p>