<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="center">
<p>
</p><div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<p></p>
<p>
</p><div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="quant[2]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[2]" class="form-control input-number" value="10" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number" data-type="plus" data-field="quant[2]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<p></p>
</div>
.center{
width: 150px;
margin: 40px auto;
}
// plugin bootstrap minus and plus
// http://jsfiddle.net/laelitenetwork/puJ6G/
// Minor prefs change and copde style by weeger.
var fieldName, type, input, currentVal, $btnNumber = $('.btn-number');
$btnNumber.click(function (e) {
e.preventDefault();
var $this = $(this);
fieldName = $this.attr('data-field');
type = $this.attr('data-type');
input = $("input[name='" + fieldName + "']");
currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if (type == 'minus') {
if (currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
if (parseInt(input.val()) == input.attr('min')) {
$this.attr('disabled', true);
}
} else if (type == 'plus') {
if (currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
if (parseInt(input.val()) == input.attr('max')) {
$this.attr('disabled', true);
}
}
} else {
input.val(0);
}
});
var minValue, maxValue, valueCurrent, name, $inputNumber = $('.input-number');
$inputNumber.focusin(function () {
var $this = $(this);
$this.data('oldValue', $this.val());
})
.change(function () {
var $this = $(this);
minValue = parseInt($this.attr('min'));
maxValue = parseInt($this.attr('max'));
valueCurrent = parseInt($this.val());
name = $this.attr('name');
if (valueCurrent >= minValue) {
$(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
} else {
alert('Sorry, the minimum value was reached');
$this.val($this.data('oldValue'));
}
if (valueCurrent <= maxValue) {
$(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
} else {
alert('Sorry, the maximum value was reached');
$this.val($this.data('oldValue'));
}
})
.keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});