SO - 14725969

by nobuts

HTML

<div id="general">
    <input type="radio" name="cate" value="2" id="lim-2" />
    <label for="lim">Food limit 2 <span class="counter"></span>
    </label>
    <br />
    <input type="radio" name="cate" value="3" id="lim-3" />
    <label for="lim">Food limit 3</label>
</div>
<hr />
<input type="checkbox" class="select_all" />Select All
<br />
<div id="general-content">Food 1
    <br />
    <input type="checkbox" class="item" name="wpmm[]" />Item 1
    <br />
    <input type="checkbox" class="item" name="wpmm[]" />Item 2
    <br />
    <input type="checkbox" class="item" name="wpmm[]" d/>Item 3
    <br />
    <input type="checkbox" class="item" name="wpmm[]" />Item 4
    <br />
</div>

JavaScript

//max activity selection based on day selected
$('input[type="checkbox"]').click(function () {
    var cate = $('input[name="cate"]:checked').val() //1,2,3
    var opt = $('input.item:checked').length;
    if (opt == cate) {
        $('input.item').not(':checked').prop('disabled', true);
    } else {
        $('input.item').not(':checked').prop('disabled', false);
    }
})

$('#general .counter').text(' ');

var fnUpdateCount = function () {
    var generallen = $("#general-content input[name='wpmm[]']:checked").length;
    console.log(generallen, $("#general i .counter"))
    if (generallen > 0) {
        $("#general .counter").text('(' + generallen + '/4)');
    } else {
        $("#general .counter").text('(0/4)');
    }
};

$("#general-content input:checkbox").on("change", function () {
    fnUpdateCount();
});

$('.select_all').change(function () {
    var checkthis = $(this);
    var checkboxes = $("#general-content input:checkbox");

    if (checkthis.is(':checked')) {
        checkboxes.prop('checked', true);
    } else {
        checkboxes.prop('checked', false);
    }
    fnUpdateCount();
});