Disable button until AJAX generated radio buttons have been selected

Question

I have a static submit button on my web page.

I make an AJAX call which generates a list of radio buttons. The number of radio buttons is random, all depends on the number of items in a JSON object.

I am wanting to validate that all of the generated radio buttons have been selected before making the submit button available.

Currently my HTML looks like this:

<div id="toDo" class="col-sm-6 text-center">
    <div id="manualChecks" class="panel panel-default">
        <div class="panel-heading text-center"><strong>Manual Check</strong</div>
    </div>
    <span class="input-group-btn">
        <button type="submit" class="btn btn-primary">Submit</button>
    </span>
</div>

My ajax reads a .JSON file and generates a list of checkboxes via the following javascript:

var ul = $('<ul class ="list-group text-left">');

            $.each(item, function (key, value) {
                var li = $('<li class="list-group-item">').append(
                    $('<input type="radio">' + value.Description + '</input>')
                );

                li.appendTo(ul);    
            });

            $('#manualChecks').append(ul);
        }

All of this works like a charm. I am just wanting to "validate" this dynamicaly generated form. I do not want to be able to press the Submit button until all of the auto generated radio buttons have been selected.

Answer 1

Begin with your button disabled

<button id="submitBtn" disabled="disabled" type="submit" class="btn btn-primary">Submit</button>

then when you're done checking that all the buttons are selected, remove the disabled attribute.

$('#submitBtn').removeAttr('disabled');

To check all the buttons are selected you'd need to write some logic for that. Just add a handler on the radio buttons to listen for when they are changed and then select them all and see if the number that are unchecked === 0.

Answer 2

Disable button before AJAX request starts.

delegate an event to the form to check for change events on radio buttons within the list.

var $submit = $('#submitBtn');
var $todo = $('#toDo');
$todo.on('change', 'input[type="radio"]', function (e) {
   var unCheckedInputs = $todo.find('input[type="radio"]:not(:checked)');

   if (unCheckedInputs.length === 0) {
      $submit.prop('disabled', false);
   }
});

Side note your inputs are malformed. you are generating code that looks like this

<input type="radio">Some Label</input>

What you want to be making is something like

<label>
   Some Label
   <input type="radio" value="" />
</label>

Inputs are self closing tags and normally do not wrap text values.