JSFiddle - React, Tailwind, and code Playground

by Kenpachi

HTML

<div id="content">
    <input name="cb[]" price="15" value="id_1" type="checkbox" /> 
    Товар 1 - 15 рублей<br />
    <input name="cb[]" price="15" value="id_2" type="checkbox" /> 
    Товар 2 - 15 рублей<br />
    <input name="cb[]" price="15" value="id_3" type="checkbox" /> 
    Товар 3 - 15 рублей<br />
    <input name="cb[]" price="15" value="id_4" type="checkbox" /> 
    Товар 4 - 10 рублей<br />
    <input name="cb[]" price="10" value="id_5" type="checkbox" /> 
    Товар 5 - 10 рублей<br />
    <input name="cb[]" price="10" value="id_6" type="checkbox" /> 
    Товар 6 - 10 рублей<br />
    <input name="cb[]" price="10" value="id_7" type="checkbox" /> 
    Товар 7 - 10 рублей<br />
    <input name="cb[]" price="5" value="id_8" type="checkbox" /> 
    Товар 8 - 5 рублей<br />
    <input name="cb[]" price="5" value="id_9" type="checkbox" /> 
    Товар 9 - 5 рублей<br />
    <input type="button" id="buy" disabled value="Купить">
</div>

CSS

#content {
    width:200px;
    padding:20px;
}

#content input {
    margin-bottom:10px;
}
#content #buy {
    padding:20px;
    width:150px;
}

JavaScript

var cnt = 0;

$('input[type=checkbox]').click(function() {
    if (this.checked) {
        cnt+=parseInt($(this).attr("price"));
    } else {
        cnt-=parseInt($(this).attr("price"));
    }
    
    if(cnt >= 25) $('#buy').removeAttr("disabled");
    else $("#buy").attr('disabled', 'disabled');
});

$("#check").click(function() {
    alert(cnt);
});