jquery plus/minus Selektor

Question

Ich habe einen Plus/Minus-Jquery-Selektor auf meiner Seite. Wenn die Seite geladen wird oder wenn die Zahl 1 erreicht, möchte ich, dass die Minus-Schaltfläche ausgegraut wird, um sie zu inaktivieren. Hier ist mein Code und eine Geige https://jsfiddle.net/pgxvhs83/2/

<span class="form-title">Quantity:</span> 
<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"/> 
<input type='button' value='+' class='qtyplus' field='quantity' style="font-weight: bold;" /> 
</form> 

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); 
    } 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); 
    } 
}); 
}); 

Answer 1

So etwas sollte funktionieren. Im folgenden Code ändert sich der - in der Schaltfläche zu einem X und legt einen roten Rahmen um ihn herum. Sie müssen mit den Stilen spielen, damit es so aussieht, wie Sie es möchten.

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("X").css('border','1px solid red');  
     } 
    }); 
}); 
</pre> 

Answer 2

Versuchen Sie, diese

https://jsfiddle.net/pgxvhs83/3/

ich diese hinzugefügt, wenn seine geladen. Und Sie haben eine ähnliche Codezeile innerhalb von Minus- und Plus-Ereignissen.

var qty = $(".qty").val(); 

    if(qty < 2){ 
    $(".qtyminus").addClass("qtyminusGrey"); 
} 

Wenn der Wert des Eingangs Menge ist 1 die qtyminusGrey Klasse Minus-Taste hinzugefügt wird. Von dort kannst du es aber wie du willst gestalten.

Hoffe, das wird helfen