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

3

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?

    
asked by anonymous 24.02.2014 / 23:14

4 answers

4

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

    
25.02.2014 / 00:35
4

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.

    
24.02.2014 / 23:43
3

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

    
24.02.2014 / 23:14
2
/* 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 .

    
25.02.2014 / 00:20