Given a group of options, one should at least be selected, using jQuery

I have a group of check boxes that allow you to select flags on a search screen. It turns out that if I allow the user to clear all, it is certain that there will be no result. That being said, I wish it would not be allowed to uncheck all checkboxes that have a specific CSS class.

Solution alternatives to the problem of selecting at least one option from a set are welcome. Maybe, instead of preventing the user, make a validation so that the user realizes that unchecking all the check is not allowed …

How to do it? And what’s best to do in terms of usability?

Here’s another alternative

$(function () {
    var checkGroup = $(".check-group");
    checkGroup.on("click", function (e) {
        var marcadas = checkGroup.filter(function () {
            return this.checked;
        });
        if (marcadas.length < 1) {
            e.preventDefault();
            $(this).closest('label').addClass('alertar');
            return;
        }
        checkGroup.closest('label').removeClass('alertar');
    });
})

CSS

.alertar {
    background-color: #fbb;
}

Example

I would use a simpler method to leave nothing unselected:

Example in JSFiddle

$('form').on("click", '.check-group', function (e) {
    return ($("form input:checkbox:checked").length >= 1);
});

Note:
Since it is a very “raw” way to control the user, a message near the boxes of choice would be recommended if you choose this solution.

On the other hand, a message to the user about what is happening would be good:

JSFiddle Example

$('form').on("click", '.check-group', function (e) {
    if ($("form input:checkbox:checked").length >= 1) {
        $('form button').html('Enviar').prop('disabled', false);
    } else {
        $('form button').html('Tens que escolher o pais').prop('disabled', true);
    }
});

Note:
This method is anti-frustration for the user, he can do what he wants, but the form is not going anywhere without at least one option checked.

I ended up doing as it is below and it works for me, but I’m not sure if it’s the right way, or if there are any better ones.

var checkGroup = $(".check-group");
checkGroup.on("click", function (e) {
    var anySelected = false;
    checkGroup.each(function () {
        if ($(this).prop('checked')) {
            anySelected = true;
            return;
        }
    });
    if (!anySelected)
        e.preventDefault();
    return anySelected;
});

This solution also leaves the user somewhat frustrated, as he attempts to unselect one for soon after selecting another.

Example in jsfiddle

/* Permite o uso da função em outros blocos de formulários */
function checkChecks(selector, buttonToDisable) {
    var s = $(selector + ':checked'),
        b = $(buttonToDisable);
    if (s.length < 1) {
        b.prop('disabled', true);
    }else{
        b.prop('disabled', false);
    }
}

Example usage:

    /* Dispara a verificação a cada mudança de algum checkbox */
    $('.check').on('change', function () {
        checkChecks('.check', '.sendform');
    });

Example in JSFIDDLE .