Button is not enabled when all fields filled

Question

I want that when all fields are filled then add more button enabled but it is not working

I tried this way all input type text, textarea are filled and select option are selected then add more button enabled

$("textarea, input[type='text']").on("keyup", function() {
  if ($(this).val() != "" && $("textarea").val() != "" && $("select[name='year']").is(":selected") == true) {
    $("input[name='add']").removeAttr("disabled");
  } else {
    $("input[name='add']").attr("disabled", "disabled");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col s12 m12 "><label for="title">Certificate Title</label>
  <textarea class="materialize-textarea" style="padding: 0px;" id="title" name="title[]">Higher School Secondary Certificate</textarea>
</div>
<div class="col s12 m12 "><label for="title">School / College, City</label>

  <textarea id="location" name="location[]" class="materialize-textarea" style="padding: 0px;"></textarea>
</div>
<div class="col s3 m3 "><label for="title">Marks</label>
  <input id="marks" name="marks[]" type="text" value="" />
</div>
<div class="col s3 m3 "><label for="title">Division</label>
  <input id="divsion" name="divsion[]" type="text" value="" placeholder="1st" />
</div>
<div class="col s3 m3 "><label for="title">Year</label>
  <select name="year[]">
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>

  </select>
</div>

<div class="col s3 m3"><button type="button" name="add" id="add" class="btn btn-success pull-right" disabled="disabled">Add More</button></div>

Answer 1

It will work for every single field

$("textarea, input[type='text'],select[name='year[]']").on("keyup change", function() {
  // console.log($(this).val());
  console.log($("select[name='year']").val());

  if ($("textarea").val() != "" && $("select[name='year']").val() != 'undefined') {
     $("#add").removeAttr("disabled");
  } else {
    $("#add").attr("disabled", "disabled");
  }
});

Answer 2

Have a look at this

I now added required to the fields

If you do not want to do that, then the input length needs to match the fields you want

$(":input[required]").on("input", function() {
  var vals = [],
    len = $(":input[required]").length; // if no button in container
  $(":input[required]").each(function() {
    var val = $(this).val();
    if (val) vals.push(this.id + ":" + val)
  });
  if (vals.length == len) $("#add").removeAttr("disabled");
  else $("#add").attr("disabled", "disabled");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="col s12 m12 "><label for="title">Certificate Title</label>
  <textarea required class="materialize-textarea" style="padding: 0px;" id="title" name="title[]">Higher School Secondary Certificate</textarea>
</div>
<div class="col s12 m12 "><label for="title">School / College, City</label>

  <textarea required id="location" name="location[]" class="materialize-textarea" style="padding: 0px;"></textarea>
</div>
<div class="col s3 m3 "><label for="title">Marks</label>
  <input required id="marks" name="marks[]" type="text" value="" />
</div>
<div class="col s3 m3 "><label for="title">Division</label>
  <input required id="divsion" name="divsion[]" type="text" value="" placeholder="1st" />
</div>
<div class="col s3 m3 "><label for="title">Year</label>
  <select required name="year[]">
    <option value="">Please select year</option>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>

  </select>
</div>

<div class="col s3 m3"><button type="button" name="add" id="add" class="btn btn-success pull-right" disabled="disabled">Add More</button></div>

Answer 3

You can .filter() and count how many elements do not have a value set.
Than use such result as boolean for the button's disabled prop.

PS: I wrapped the below in a <form> but you can use whatever parent selector you need, of course.

const $inp = $('#myForm :input:not(#add)'),
      $btn = $('#add');

$inp.on('input', () => $btn.prop('disabled', $inp.filter((i, el) => !el.value).length > 0));

label, label *{display: block;}

<form id="myForm">
  <label>Certificate Title<textarea name="title[]" placeholder="Higher School Secondary Certificate"></textarea></label>
  <label>School / College, City<textarea name="location[]"></textarea></label>
  <label>Marks<input name="marks[]" type="text"></label>
  <label>Division<input name="divsion[]" type="text" placeholder="1st"></label>
  <label>Year<select name="year[]"><option value='' selected disabled>--Select--</option><option value="2018">2018</option><option value="2019">2019</option></select></label>
  <button type="button" id="add" disabled>Add More</button>
</form>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>