时间戳

首页 > 解决方案 > 填写所有字段时未启用按钮

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

问题描述

我希望在填写所有字段后添加更多按钮启用但它不起作用

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

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

标签： jquery

解决方案

您可以.filter()计算有多少元素没有value集合。比对按钮的道具
使用布尔值这样的结果。disabled

PS：我将以下内容包装在 a<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>

推荐阅读