There's already a JavaScript solution. I'll use jQuery to provide an answer per the user's request. I had to make some changes to the html as below:
- The checkboxes have different name attribute values. I made them all the same - question #2
- The radio buttons of question 1 have the same name attribute values but there's a hidden input element with the same name attribute value - I commented that out.
Here are my considerations:
- Different form element types (text boxes, radio buttons, select, textareas, checkboxes) have different ways of validating them. Fortunately radios and checkboxes validate similarly.
- Different form element types have different triggers one can use for triggering the start of a validation check.
If the form were to expand to use several different form element types, lines can be added to the event binding part and a corresponding case section in the switch statement. It's quite straight forward:
$(function() {
var elements = $('form').find('input,select,textarea')
.map( function(v, i) { return this.name; }).get();
$.unique( elements );
console.log( elements );
$('input[type=text]').on('keyup',ready2Submit);
$(':radio,:checkbox').on('change',ready2Submit);
function ready2Submit() {
var ready = true;
$.each(elements, function() {
var el = $('[name=' + this + ']');
switch( el[0].type ) {
case 'checkbox':
case 'radio':
if( el.filter(':checked').length === 0 ) {
ready = false;
return false;
}
break;
case 'text':
if( el[0].value.trim().length === 0 ) {
ready = false;
return false;
}
break;
}
});
$('#saveForm').prop('disabled',!ready);
}
});
THIS DEMO shows the above code at work. I added a text box just to show how the code can be expanded on when & if necessary.