Ajouter une remise au-panier en utilisant les cases à cocher

Question

J'ai vraiment besoin de quelqu'un qui peut me aider :-)

Je veux donner aux clients un rabais en cliquant sur différentes cases à cocher dans ma boutique.

Les visiteurs peuvent choisir au maximum 4 cases à cocher. pas 5, 6 etc. Est-il possible de faire cela?

Mon problème maintenant est que le client peut réellement obtenir l'article gratuitement - ou pire - je dois payer pour leur vendre des marchandises!

Voici le test-code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="20" /> 
<label for="checkbox1" class="css-label">banana</label><br> 

<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="20" /> 
<label for="checkbox2" class="css-label">apple</label><br> 

<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="20" /> 
<label for="checkbox3" class="css-label">biscuit</label><br> 

<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="20" /> 
<label for="checkbox4" class="css-label">jam </label><br> 

<input type="checkbox" name="checkbox5" id="checkbox5" class="css-checkbox" value="20" /> 
<label for="checkbox5" class="css-label">orange </label><br> 

<input type="checkbox" name="checkbox6" id="checkbox6" class="css-checkbox" value="20" /> 
<label for="checkbox6" class="css-label">pinepple </label><br> 

<br /><br /> 

<span id="total"><b>Normal price: </b> 100</span></p> 

<script> 
var $total = 100; 
var $total2 = 100; 

$('input:checkbox').on('change', function() { 
    if (this.checked) 
     $total += -this.value; 
    else 
     $total -= -this.value; 

     if ($total2 > $total) 
      $('#total').html('<b>Discount price: </b>'+$total); 
     else 
      $('#total').html('<b>Normal price: </b>'+$total); 
}); 
</script> 

Answer 1

Ainsi, la logique est -

Si les 4 cases sont cliqués puis désactivez le repos

var $total = 100; 
 
var $total2 = 100; 
 

 
$('input:checkbox').on('change', function() { 
 
if($('input:checked').length == 4) { 
 
\t $('input:checkbox:not(:checked)').attr("disabled", true); 
 
    } 
 
    else { 
 
    $('input:checkbox:not(:checked)').attr("disabled", false); 
 
    } 
 
    if (this.checked) 
 
     $total += -this.value; 
 
    else 
 
     $total -= -this.value; 
 

 
     if ($total2 > $total) 
 
      $('#total').html('<b>Discount price: </b>'+$total); 
 
     else 
 
      $('#total').html('<b>Normal price: </b>'+$total); 
 
      
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="20" /> 
 
<label for="checkbox1" class="css-label">banana</label><br> 
 

 
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="20" /> 
 
<label for="checkbox2" class="css-label">apple</label><br> 
 

 
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="20" /> 
 
<label for="checkbox3" class="css-label">biscuit</label><br> 
 

 
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="20" /> 
 
<label for="checkbox4" class="css-label">jam </label><br> 
 

 
<input type="checkbox" name="checkbox5" id="checkbox5" class="css-checkbox" value="20" /> 
 
<label for="checkbox5" class="css-label">orange </label><br> 
 

 
<input type="checkbox" name="checkbox6" id="checkbox6" class="css-checkbox" value="20" /> 
 
<label for="checkbox6" class="css-label">pinepple </label><br> 
 

 
<span id="total"><b>Normal price: </b> 100</span>