Добавить скидку в торговой тележке с помощью флажков

Question

мне действительно нужен кто-то, кто может помочь мне :-)

Я хочу, чтобы предоставить клиентам скидку, нажав различные галочки в моем магазине.

Посетители могут выбрать max 4 checkboxes. не 5, 6 и т. д. Можно ли это сделать?

Моя проблема теперь в том, что клиент может получить товар бесплатно - или, что еще хуже - я должен заплатить, чтобы продавать товары им!

Вот тест-код:

<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

Так логика -

Если 4 Флажки щелкнул затем отключить остальное

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>