Disable Submit Button With JQuery Until All Fields Have Values (input, Radio, Select, Checkbox)

I have a form with a several different field types, all of which need to be complete before submission. I have the submit button disabled and would like to remove the disabled attr

Solution 1:

A few remarks:

1. In the next snippet, I assume ALL inputs (except radio buttons) have to be filled in before making the form submittable, which does not necessarily represent all real life scenarios.
2. As mentioned, radios (in this example only 2) are given a special treatment since only one per group can be selected.
3. Concerning <select>s, one will be considered invalid if an empty option if selected (if one exists). In this example, your select tag always has a non-empty value, I added another to the markup to show its behavior.

Let me know if it works

$(document).ready(function() {

 $(":input").on('input', function(){validate();});
 $(":input").on('change', function(){validate();});
});

function validate() {
  var $submitButton = $("input[type=submit]");
  
  var isValid = true;
  
  if($(':checkbox:checked').length != $(':checkbox').length)
    isValid = false;
  else if($(':radio:checked').length == 0)
    isValid = false;
  else{
    $('input:text, textarea').each(function() {  
      if($(this).val() == ''){
        isValid = false;
        return false;
      }
    });
    if(isValid){
      $('select').each(function() {  
      if($(this).val() == ''){
        isValid = false;
        return false;
      }
    });
    }
  }
  
   $submitButton.prop("disabled", !isValid);
}

.contact-form {
	width: 400px;
	margin: 50px;
}

.contact-form__row {
	padding: 0 0 10px;
	margin: 0 0 10px;
	border-bottom: 1px solid grey;
}

p {
	font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-form">
	<div class="contact-form__row">
		<p>Text field</p>
		<input type="text" />
	</div>
	<div class="contact-form__row">
		<p>Radio fields</p>
		<label for="radio-1">Radio 1</label>
		<input id="radio-1" type="radio" name="radio-option" />
		<label for="radio-2">Radio 2</label>
		<input id="radio-2" type="radio" name="radio-option" />
	</div>
	<div class="contact-form__row">
		<p>Checkbox fields</p>
		<label for="checkbox-1">Checkbox 1</label>
		<input id="checkbox-1" type="checkbox" />
		<label for="checkbox-2">Checkbox 2</label>
		<input id="checkbox-2" type="checkbox" />
	</div>
	<div class="contact-form__row">
		<p>Select options</p>
		<select id="my-select" name="my-select">
			<option value="a">Option A</option>
			<option value="b">Option B</option>
		</select>
    <select id="my-select" name="my-select">
			<option></option>
      <option value="a">Option A</option>
			<option value="b">Option B</option>
		</select>
	</div>
	<div class="contact-form__row">
		<p>Text area</p>
		<textarea></textarea>
	</div>
	<div class="contact-form__row">
		<input type="submit" value="Submit" disabled />
	</div>
</div>

Solution 2:

you can do like this with jQuery: (in codepen replace all your javascript with this code, I have tested it in your codepen)

<script>
$(function() {
    $('.contact-form').on('input',':input',function() {
        var inputs = $('.contact-form :input');
        var num_inputs = inputs.length;
        var num_filled = inputs.filter(function() { return !!this.value }).length;
        $('.contact-form :submit').prop('disabled',(num_filled<num_inputs));
    });
});
</script>

good luck!