-1

Trying to disable a form submit button unless a selection has been made from a number of radio button groups. Have got this far, cant see why not working, button stays disabled:

    <script>
        $(function () {
            $('#button').attr('disabled', true);

                var disable = true;
                $('input:radio').click(function () {
                    $('input:radio').each(function () {
                        if ($(this).is(':checked'))
                            disable = false;
                        else
                            disable = true;
                    });
            });
            $('#button').prop('disabled', disable == true ? true : false);
        });
    </script>
Frank Miller
  • 3
  • 3
  • Side note: This `$('#button').prop('disabled', disable == true ? true : false);` should be just `$('#button').prop('disabled', disable);` – emerson.marini Feb 09 '15 at 17:36
  • You only check the state *inside a click event*, but you only change the prop *once on-load*. – iCollect.it Ltd Feb 09 '15 at 17:37
  • http://stackoverflow.com/questions/6796870/determine-if-every-radio-group-has-had-an-option-selected – j08691 Feb 09 '15 at 17:45
  • adeneo's answer should solve the issue but the reason why your code is not working is because you're looking for `click` event instead of `change`. Another issue is in `each()`, you're not stopping at the first checked radio button. So if you've 5 radio buttons and the 3rd one is checked, in 3rd iteration `disable` becomes `false` but the loop continues and in 4th and 5th iterations, it becomes true again :) so you should stop at the moment you see that one of the check boxes is checked by using `break` – Arkantos Feb 09 '15 at 17:46
  • Also your `$('#button').prop('disabled',disable)` should be within the change handler – Arkantos Feb 09 '15 at 17:55
  • @FrankMiller.. i think my solution is incorrect. Can you explain that different radio groups thing once ? wat exactly are you expecting ? – Arkantos Feb 09 '15 at 20:06
  • Hi, was just about to reply, have been trying your solution - my mark up is like this http://jsfiddle.net/ngz33jj0/1/ – Frank Miller Feb 09 '15 at 20:07
  • Hopefully.. This should work [fiddle](http://jsfiddle.net/ngz33jj0/4/) :) – Arkantos Feb 09 '15 at 20:38

1 Answers1

1

You should probably change the property inside the handler, and the right handler for a radio button would be onchange

$(function () {
    var button = $('#button').prop('disabled', true);
    var radios = $('input[type="radio"]');
    var arr    = $.map(radios, function(el) { 
                      return el.name; 
                 });

    var groups = $.grep(arr, function(v, k){
                     return $.inArray(v ,arr) === k;
                 }).length;

    radios.on('change', function () {
        button.prop('disabled', radios.filter(':checked').length < groups);
    });
});

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • What if there's more than one group of radio buttons to check? This would seem to enable the button if any radio button group had one item checked. – j08691 Feb 09 '15 at 17:41
  • @FrankMiller - you're welcome, and no, it's not that straight forward, one has to count the number of groups based on unique names, or at least something similar to that – adeneo Feb 09 '15 at 17:59