Disable a submit and Activate only when the minimum radio buttons is selected

4

I tried to make a function but it came out with some strange bugs, it has to be more or less this script, but enable button only if 5 or more radio buttons are marked. Remembering that my form is huge, it is a questionnaire that has radio groups, for example:

<input type="radio" name="group[001]" id="1">apple
<input type="radio" name="group[001]" id="2">pineapple
<input type="radio" name="group[001]" id="3">melon
...
<input type="radio" name="group[002]" id="4">strawberry
<input type="radio" name="group[002]" id="5">orange
<input type="radio" name="group[002]" id="6">kiwi
    
asked by anonymous 27.02.2014 / 18:28

5 answers

5

You can check as you are choosing the options if you already have 5 or more to activate the button:

Example in JSFiddle

// desactiva por defeito
$('form button').html('Tens que escolher mínimo 5').prop('disabled', true);

// controla se tem mínimo 5 escolhidos para activar
$('form').on("click", 'input[type="radio"]', function (e) {
    if ($("form input:radio:checked").length >= 5) {
        $('form button').html('Enviar').prop('disabled', false);
    } else {
        $('form button').html('Tens que escolher mínimo 5').prop('disabled', true);
    }
});

Notes:

I'm using .html() merely to inform the user with an appropriate message, but it's not minimally necessary for what you want, it's just a touch of UI.

The code in your version that does not use the message to the user would be even smaller:

JSFiddle Example

// desactiva por defeito
$('form button').prop('disabled', true);

// controla se tem mínimo 5 escolhidos para activar
$('form').on("click", 'input[type="radio"]', function (e) {
    $('form button').prop('disabled', ($("form input:radio:checked").length < 5));
});

Note: Verification here is reversed because .prop("disable") expects true to disable.     

27.02.2014 / 18:53
3

It is possible to scroll through the% checked% and count how many.

See the example:

$('input').change(function() {

    //habilita/desabilita botão
    $('button').prop('disabled', 
           $('input[type="radio"]:checked').length < 5);

});

Demo on jsfiddle

    
27.02.2014 / 18:47
2

Add in the "change" event of each input a function that checks the amount of input that is marked, if it is the number you want, you can set the "submit" disabled property to false, otherwise , as "true".

link

link

    
27.02.2014 / 18:37
0

It would be something like this:

$('input[type=checkbox]').change(
    function() {
    $('input[type=submit]').prop("disabled",    ($('input[type=checkbox]:checked').toArray().length>=5));

   }});
    
27.02.2014 / 19:00
0

It's quite easy to simplify the enable / disable logic.

Adding a handler to the radio button's click or change.

link

Remembering that in case of radio button only one of each group can be selected.

    
27.02.2014 / 19:00