Jquery Buttons

by hiteshbhilai2010

HTML

<div id="qtybox">
	<label for="qty">Quantity:</label>
	<input name="qty" class="qty" type="text" value="1" size="3" maxlength="2" max="2">
    <div id="toggle-buttons">
	    <button class="qtyplus" onclick="return false">+</button>
         <button class="qtyminus" onclick="return false">-</button>
     </div>
</div>
    
    <div id="qtybox">
	<label for="qty">Quantity:</label>
	<input name="qty" class="qty" type="text" value="1" size="3" maxlength="2" max="2">
    <div id="toggle-buttons">
	    <button class="qtyplus" onclick="return false">+</button>
         <button class="qtyminus" onclick="return false">-</button>
     </div>
</div>
        
        <div id="qtybox">
	<label for="qty">Quantity:</label>
	<input name="qty" class="qty" type="text" value="1" size="3" maxlength="2" max="2">
    <div id="toggle-buttons">
	    <button class="qtyplus" onclick="return false">+</button>
         <button class="qtyminus" onclick="return false">-</button>
     </div>
</div>

CSS

#qtybox {
	margin-top: 20px;
}

.qty,
#salable-product td.stock label {
	height: 22px;
	vertical-align: top;
}

.qty, .qty:focus {
	text-align: center;
	background: #D8D9D8 !important;
	border: 0;
	border-radius: 3px;
}

JavaScript

$(document).ready(function(){
	var maxqty = parseInt($('.qty').attr('max'))
    $(".qtyplus").click(function(){
     if($(this).parent().prev('.qty').val()<maxqty)
     $(this).parent().prev(":text[name='qty']").val( Number($(this).parent().prev(":text[name='qty']").val()) + 1 );
    });
    $(".qtyminus").click(function(){
     if($(this).parent().prev('.qty').val()>1)
      $(this).parent().prev(":text[name='qty']").val( Number($(this).parent().prev(":text[name='qty']").val()) - 1 );
    });
});