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

Asked

Viewed 224 times

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 uncheck all of them, it is certain that there will be no result. That said, I wish it was not 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 stopping the user, doing a validation so that the user realizes that unchecking all checks is not allowed...

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

javascript jquery

  • I voted for your question, but because your effort can be seen in your answer. However... it would be nice to add some code, if only to Markup and a Jsfiddle with the same, to your question so that it is a good candidate for positive manifestations ;)

  • @Zuul: I was afraid to limit responses about checkboxes... maybe it’s not ideal in terms of UX using checkboxes. I’m researching about UX/usability, and so far it’s inconclusive... meanwhile I’m going to checkboxes same.

4 answers

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 that is happening would be good:

Example in Jsfiddle

$('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-fouling the user, he can do what he wants, but the form goes nowhere without at least one option being checked.

4


Here is 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

  • Do you think it looks better as in UX terms? Let it deselect by showing the red background, or never let the state be invalid?

  • @Miguelangelo, if you can desilect "the last one" then they should all turn red. Like this: http://jsfiddle.net/JntCC/1/

3

I ended up doing as it is below and works for me, but I’m not sure if it is the most correct way, or if there are other better.

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 a little frustrated when he tries to desiccate one and then select another.

Example in jsfiddle

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 of use:

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

Example in JSFIDDLE.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.