<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Increases / Decreases - Aumenta e diminui valores inteiros</h2> </div> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <label>Qtd (Mínimo 1)</label> <div class="input-group input-sm"> <span id="menos" class="input-group-addon input-sm"><a href="#"><span class="glyphicon glyphicon-chevron-left text-danger"></span></a></span> <input id="quantidade" name="quantidade" style="text-align:center;" type="number" value="1" class="form-control input-sm blue"> <span id="mais" class="input-group-addon input-sm"><a href="#"><span class="glyphicon glyphicon-chevron-right text-success"></span></a></span> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <label>Example 2</label> <div class="input-group input-sm"> <span id="menos" class="input-group-addon input-sm"><a href="#"><span class="glyphicon glyphicon-minus text-danger"></span></a></span> <input id="quantidade" name="quantidade" style="text-align:center;" type="number" value="1" class="form-control input-sm blue"> <span id="mais" class="input-group-addon input-sm"><a href="#"><span class="glyphicon glyphicon-plus text-success"></span></a></span> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <label>Example 3</label> <div class="input-group input-sm"> <span id="menos" class="input-group-addon input-sm"><a href="#"><span class="glyphicon glyphicon-minus-sign text-danger"></span></a></span> <input id="quantidade" name="quantidade" style="text-align:center;" type="number" value="1" class="form-control input-sm blue"> <span id="mais" class="input-group-addon input-sm"><a href="#"><span class="glyphicon glyphicon-plus-sign text-success"></span></a></span> </div> </div> </div> </div>

$("#mais,#menos").click(function () { var valor = verificaQuantidade(); alternaQuantidade(valor,this.id); }); $("#quantidade").blur(function () { var valor = verificaQuantidade(); $("#quantidade").val(valor); }); function verificaQuantidade(){ var quantidade = parseInt($("#quantidade").val()); var valor = ( Number.isNaN(quantidade) || quantidade < 1 ) ? 1 : quantidade; return valor; } function alternaQuantidade(valor, campo) { valor = (campo == "mais") ? (valor + 1):( (valor > 1) ? (valor - 1): valor); $("#quantidade").val(valor); }