Hola estoy teniendo problemas con un input form de números ,resulta que cuando repito todo el div solo me toma estilo a uno solo.
(function ( $ ) {
$.fn.bootstrapNumber = function( options ) {
var settings = $.extend({
upClass: 'default',
downClass: 'default',
upText: '+',
downText: '-',
center: true
}, options );
return this.each(function(e) {
var self = $(this);
var clone = self.clone(true, true);
var min = self.attr('min');
var max = self.attr('max');
var step = parseInt(self.attr('step')) || 1;
function setText(n) {
if (isNaN(n) || (min && n < min) || (max && n > max)) {
return false;
}
clone.focus().val(n);
clone.trigger('change');
return true;
}
var group = $("<div class='input-group'></div>");
var down = $("<button type='button'>" + settings.downText + "</button>").attr('class', 'btn btn-' + settings.downClass).click(function() {
setText(parseInt(clone.val() || clone.attr('value')) - step);
});
var up = $("<button type='button'>" + settings.upText + "</button>").attr('class', 'btn btn-' + settings.upClass).click(function() {
setText(parseInt(clone.val() || clone.attr('value')) + step);
});
$("<span class='input-group-btn'></span>").append(down).appendTo(group);
clone.appendTo(group);
if(clone && settings.center) {
clone.css('text-align', 'center');
}
$("<span class='input-group-btn'></span>").append(up).appendTo(group);
// remove spins from original
clone.prop('type', 'text').keydown(function(e) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
(e.keyCode == 65 && e.ctrlKey === true) ||
(e.keyCode >= 35 && e.keyCode <= 39)) {
return;
}
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
var c = String.fromCharCode(e.which);
var n = parseInt(clone.val() + c);
if ((min && n < min) || (max && n > max)) {
e.preventDefault();
}
});
self.replaceWith(group);
});
};
} ( jQuery ));
$("[name='checkbox2']").change(function() {
if(!confirm('Do you wanna cancel me!')) {
this.checked = true;
}
});
$('#after').bootstrapNumber();
$('#colorful').bootstrapNumber({
upClass: 'success',
downClass: 'danger'
});
.cantidad span{
margin-right: 0;
border: initial
}
.cantidad button{
background: transparent!important;
}
.cantidad .form-group{
width: 167px
}
.cantidad .input-group{
border: 1px solid gray;
}
.cantidad .input-group > .form-control{
border: 1px solid #fff!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="cantidad">
<div class="form-group">
<label><b>Cantidad:</b></label>
<input id="after" class="form-control" type="number" value="1" min="1" max="10" />
</div>
<div class="form-group">
<label><b>Cantidad:</b></label>
<input id="after" class="form-control" type="number" value="1" min="1" max="10" />
</div>
</div>
#html-input-range
en tu código, pero de cualquier manera, si vas a aplicar el plugin a varios elementos, usa una clase, no un ID. Si un ID se repite en el documento los selectores del DOM sólo consideran al primero que cumpla el match#after
. InvocarbootstrapNumber
sobre ese selector sólo afectará al primer elemento con ese ID. No deben repetirse los id en un documento. La solución que te propusieron en la respuesta (usar un className) es lo que te puse en el primer comentario, y es el enfoque correcto