0

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>

5
  • No veo un elemento con id #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
    – ffflabs
    Commented el 14 jun. 2018 a las 15:26
  • claro si puede ser por eso quizás.
    – MarianoF
    Commented el 14 jun. 2018 a las 15:31
  • Que ID decís que cambie?
    – MarianoF
    Commented el 14 jun. 2018 a las 18:40
  • Veo que editaste la pregunta, pero el problema persiste. Tienes dos elementos con id #after. Invocar bootstrapNumber 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
    – ffflabs
    Commented el 14 jun. 2018 a las 20:10
  • Si si ya esta resuelto, gracias.
    – MarianoF
    Commented el 14 jun. 2018 a las 20:11

1 respuesta 1

2

Mueve after de id a clase:

$('.after').bootstrapNumber();

<input class="form-control after">
1
  • gracias Armando, funciono perfecto
    – MarianoF
    Commented el 14 jun. 2018 a las 18:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.