Disable a Ubmit and Enable only when radio minimum Buttons is selected

Asked

Viewed 2,014 times

4

I tried to do a function but came out with some strange bugs, it has to be more or less this script, but enable the button only if 5 or more radio Buttons are marked. Remembering that my form is huge, 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
javascript jquery html

5 answers

5


You can check as you choose 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 the .html() merely to inform the user with an appropriate message, but is not at all necessary for what you want, it’s just a touch of UI.

The code in its version that makes no use of the user message would be further reduced:

Example in Jsfiddle

// 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: The check here is reversed because the .prop("disable") waiting true to deactivate.

  • 1

    That’s right there @Zuul +1 for your reply!

  • 1

    +1 Answer well complete!

3

It is possible to traverse the radios marked and count how many have.

Take the example:

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

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

});

Demo no jsfiddle

  • I forgot that you don’t need to check if more than one radio is marked. Dumb, gives zero to him!

  • Yeah, I was looking at your code to see if I understood why! : ) +1 Now

2

0

It would be something like that:

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

   }});
  • 1

    the problem in this case is that each time a checkbox is changed jQuery will scan the Dom for the changed checkboxes. If all the items you need are already loaded into the DOM the best thing to do is to keep the reference to them somewhere (var).

  • It depends a lot on how relevant the performance is. If jQuery is being used instead of pure js, I imagine this is not the priority.

  • 1

    Even though performance is not a critical requirement in his case, I think sweeping the DOM continuously is unnecessary. And using jQuery shouldn’t be an excuse to relax with the code.

  • In my humble opinion, relax node code and make use of global variables when there is no need.

  • They will not be global variables if they are within a (Function(){}()) or $(Document). ready(Function(){}) for example.

0

The logic of enable/disable can be greatly simplified.

Adding an Handler to the radio Buttons click or change.

http://jsfiddle.net/moykn/nY4g5/

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

Browser other questions tagged javascript jquery html

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