Question

我希望所有字段都填写完后再添加更多按钮，但它不起作用

我尝试过这种方式，所有输入类型的文本，textarea都被填充并选择了select选项，然后启用了添加更多按钮

$("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

看看这个

我现在将必填项添加到字段

如果您不想这样做，那么输入长度需要与您想要的字段匹配

$(":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 2

您可以.filter()并计算有多少个元素没有设置value。
比对按钮的disabled属性使用布尔值之类的结果。

PS：我将下面的内容包装在<form>中，但是您当然可以使用所需的任何父选择器。

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>

Answer 3

它将适用于每个字段

$("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");
  }
});

填写所有字段时未启用按钮

3 个答案: