Plus/Minus Valeur Maximale D'Entrée

J'ai un plus/moins de bouton et de le voudrait, de sorte que les utilisateurs ne peuvent pas sélectionner plus de 20, mais ne sais pas comment le faire fonctionner. J'ai essayé d'utiliser le min="1" max="5 attributs, mais ils n'ont pas de travail. Voici mon code et un lien vers un violon. https://jsfiddle.net/6n9298gp/

<form id='myform' method='POST' action='#' class="numbo">
<input type='button' value='-' class='qtyminus' field='quantity' style="font-weight: bold;" />
<input type='text' name='quantity' value='1' class='qty' style="margin-bottom: 0px !important" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
<input type='button' value='+' class='qtyplus' field='quantity' style="font-weight: bold;" />
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
//This button will increment the value
$('.qtyplus').click(function(e){
//Stop acting like a button
e.preventDefault();
//Get the field name
fieldName = $(this).attr('field');
//Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
//If is not undefined
if (!isNaN(currentVal)) {
//Increment
$('input[name='+fieldName+']').val(currentVal + 1);
$('.qtyminus').val("-").removeAttr('style')
} else {
//Otherwise put a 0 there
$('input[name='+fieldName+']').val(1);
}
});
//This button will decrement the value till 0
$(".qtyminus").click(function(e) {
//Stop acting like a button
e.preventDefault();
//Get the field name
fieldName = $(this).attr('field');
//Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
//If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 1) {
//Decrement one
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
//Otherwise put a 0 there
$('input[name='+fieldName+']').val(1);
$('.qtyminus').val("-").css('color','#aaa');
$('.qtyminus').val("-").css('cursor','not-allowed');
}
});
});
</script>

Avez-vous essayé d'ajouter else if(currentVal == 20) { $('input[name='+filedName+']').val(currentVal); après la première if et entre les else? La première if aurez besoin d'un && currentVal != 20 ajouté.
Ne pouvez-vous pas juste vérifier si currentVal est de 20, puis de retour à partir de la + bouton de l'événement?

InformationsquelleAutor sizemattic | 2016-06-06

1

J'ai mis à jour le jsfiddle ici : https://jsfiddle.net/6n9298gp/5/

Fondamentalement juste ajouté un bloc qui va vérifier que la valeur actuelle est inférieure à 20 pour permettre à incrémenter le contraire de montrer votre "non autorisé" icône :
```
if (currentVal < 20)
{
$('input[name='+fieldName+']').val(currentVal + 1);
$('.qtyminus').val("-").removeAttr('style');
}
else
{
$('.qtyplus').val("+").css('color','#aaa');
$('.qtyplus').val("+").css('cursor','not-allowed');
}
```
Également ajouté une ligne pour supprimer le curseur a pas permis une fois que vous décrémentation :
```
//Decrement one only if value is > 1
$('input[name='+fieldName+']').val(currentVal - 1);
$('.qtyplus').val("+").removeAttr('style');
```
InformationsquelleAutor zoubida13
4

<input type="number" min="1" max="20" step="1">

Ensuite, vous pouvez utiliser le script de livrer les messages de validation (seulement parce que les messages sont intégrés dans les navigateurs pour le nombre de champ sont les pauvres).

Cela supprime les dépendances sur les bibliothèques, suit la spécification HTML, et a d'accessibilité intégrées pour gratuit.

Si vous avez encore besoin de +/− permettent de satisfaire à une conception de restriction, assurez-vous d'utiliser un caractère moins ( − ), puis progressivement améliorer votre script sur le haut de la bon type de champ. De cette façon, quel que soit le scénario où votre jQuery ne pas télécharger (tel qu'un réseau hoquet) ou il y a une erreur de script sur la page ne sont pas apporter toute la chose s'écraser vers le bas.

Si vous n'êtes pas à satisfaire à une exigence de conception avec les boutons+/−, envisager de perdre tout à fait.

Vous pouvez également renforcer progressivement ce pour les navigateurs qui pourraient lutter avec type="number" (si vous pouvez voir le soutien est très bonne tout motif support est encore mieux) sans script en mettant une mise en correspondance du modèle dans l'élément, si ce n'est un joli bord de cas:

<input type="number" min="1" max="20" step="1" pattern="[0-9]*">

Vous pouvez lire plus sur type="number" dans la spec HTML5 ou la langue de référence.

InformationsquelleAutor aardrian

Que vous faisiez correcte.

$('.qtyplus').click(function(e){
//Stop acting like a button
e.preventDefault();
//Get the field name
fieldName = $(this).attr('field');
//Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
//If is not undefined
if (!isNaN(currentVal) && currentVal < 20) {
//Increment
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
//Otherwise put a 0 there
//$('input[name='+fieldName+']').val(1);
$(this).val("+").css('color','#aaa');
$(this).val("+").css('cursor','not-allowed');
}
});

JS:

jQuery(document).ready(function(){
//This button will increment the value
$('.qtyplus').click(function(e){
//Stop acting like a button
e.preventDefault();
//Get the field name
fieldName = $(this).attr('field');
//Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
//If is not undefined
if (!isNaN(currentVal) && currentVal < 20) {
//Increment
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
//Otherwise put a 0 there
//$('input[name='+fieldName+']').val(1);
$(this).val("+").css('color','#aaa');
$(this).val("+").css('cursor','not-allowed');
}
});
//This button will decrement the value till 0
$(".qtyminus").click(function(e) {
//Stop acting like a button
e.preventDefault();
//Get the field name
fieldName = $(this).attr('field');
//Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
//If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 1) {
//Decrement one
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
//Otherwise put a 0 there
$('input[name='+fieldName+']').val(1);
$(this).val("-").css('color','#aaa');
$(this).val("-").css('cursor','not-allowed');
}
});
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='myform' method='POST' action='#' class="numbo">
<input type='button' value='-' class='qtyminus' field='quantity' style="font-weight: bold;" />
<input type='text' name='quantity' value='1' class='qty' style="margin-bottom: 0px !important" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
<input type='button' value='+' class='qtyplus' field='quantity' style="font-weight: bold;" />
</form>

InformationsquelleAutor Parvez Rahaman

Essayez d'ajouter une condition pour vérifier la valeur inférieure à la valeur max.

$('.qtyplus').click(function(e){
//Stop acting like a button
e.preventDefault();
//Get the field name
fieldName = $(this).attr('field');
//Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
//If is not undefined
if (!isNaN(currentVal)) {
//Increment
if(currentVal<20)
{
$('input[name='+fieldName+']').val(currentVal + 1);
$('.qtyminus').val("-").removeAttr('style');
}
} else {
//Otherwise put a 0 there
$('input[name='+fieldName+']').val(1);
}
});

InformationsquelleAutor riteshmeher

Vous devez vous connecter pour publier un commentaire.