JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<div id="input-option10">
    <div id="checkbox-custom-group">
        <div id="count-checked"></div>
        <div class="checkbox checkbox-custom">
            <label>
                <input type="checkbox" price="                                                                      ₺5,00
                    " data-prefix="+" data-price="₺5,00" name="option[10][]" value="34">
                <span class="number-wrapper">
                    <input id="qtynumer-34" data-placement="top" title="Quantity" type="number" oninput="countQtyProduct(this)" data-option="input-option10" data-type="checkimg_qty" data-prefix="+" data-value="34" value="" placeholder="1" class="form-control qty">
                    <div class="qty-btn-vertical">
                        <button id="add-quantity" onclick="qtyoptionchange('34','+')" class="btn btn-default" type="button">+</button>
                        <button id="remove-quantity" onclick="qtyoptionchange('34','-')" class="btn btn-default" type="button">-</button>
                    </div>
                </span>
                <img src="https://www.creascreative.com/demo/lokumatolyesi2/image/cache/catalog/product/lokumlar/sultan_sut_kaymakli_lokum_500_g_893daeef9e-50x50.jpg" alt="Sultan Süt Kaymaklı Lokum 100 G +₺5,00" class="img-thumbnail img-thumbnail-custom">
                <div id="text">  Sultan Süt Kaymaklı Lokum 100 G
                    <br> (+₺5,00)
                </div>
            </label>
        </div>
        <div class="checkbox checkbox-custom">
            <label>
                <input type="checkbox" price="                                                                      ₺5,00
                    " data-prefix="+" data-price="₺5,00" name="option[10][]" value="35">
                <span class="number-wrapper">
                    <input id="qtynumer-35" data-placement="top" title="Quantity" type="number" oninput="countQtyProduct(this)" data-option="input-option10" data-type="checkimg_qty"...

JavaScript

$('#checkbox-custom-group .checkbox').each(function(index, value) {
	//console.log(index);
});

let $checkboxes = $('#checkbox-custom-group .checkbox input[type="checkbox"]');
let $countChecked = $('#checkbox-custom-group #count-checked');

$checkboxes.change(function(){
	let checkedLimit = 5;
	let countCheckedCheckboxes = $checkboxes.filter(':checked').length;
	
	if (countCheckedCheckboxes > checkedLimit) {
		$(this).filter('input[type="checkbox"]').attr('checked', false);
		$countChecked.text(checkedLimit + ' adet ürün seçtiniz');
		alert('En fazla 5 ürün seçebilirsiniz');
	} else {
		$countChecked.text(countCheckedCheckboxes + ' adet ürün seçtiniz');
	}
});