檢查是否已填寫所有輸入以刪除禁用的屬性

Question

我想檢查所有輸入是否都具有值，而不是刪除按鈕上的Disabled屬性。

在下面的代碼中，我插入了一個代碼段，但是當只有一個輸入具有值時，這會刪除該屬性。

  $(".follow-url-inputs").each(function(index, item) { $(item).change(function() { var empty = $(this).filter(function() { return this.value === ""; }); if (empty.length) { console.log("all fiels filled in"); } else { $('.fs_btn-save').removeAttr('disabled') } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="follow-inputs text-center px-5"> <div class="input-group px-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fab fa-facebook"></i> </span> </div> <input id="facebook" class="form-control follow-url-inputs" name="facebook" placeholder="https://facebook.com/followURL" data-com.agilebits.onepassword.user-edited="yes"> </div><br> <div class="input-group px-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fab fa-linkedin"></i> </span> </div> <input id="linkedin" class="form-control follow-url-inputs" name="linkedin" placeholder="https://linkedin.com/followURL" data-com.agilebits.onepassword.user-edited="yes"> </div><br> <div class="input-group px-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fab fa-twitter"></i> </span> </div> <input id="twitter" class="form-control follow-url-inputs" name="twitter" placeholder="https://twitter.com/followURL" data-com.agilebits.onepassword.user-edited="yes"> </div><br></div> <div class="text-center"> <button class="btn btn-primary fs_btn-primary fs_btn-save" disabled onclick="setupFollowButtons()">Save</button> </div> 

有人可以幫助我檢查所有輸入是否都具有值，然后刪除Disabled屬性。

Answer 1

邏輯有點倒退。 您要過濾每個更改內部的所有輸入。 您當前的代碼僅過濾已更改的代碼

var $inputs = $(".follow-url-inputs").change(function() {

  var inValid = $inputs.filter(function() {
    return !this.value.trim();
  }).length;

  $('.fs_btn-save').prop('disabled', inValid)

  if (!inValid) {
    console.log("all fiels filled in");
  }     
});

Answer 2

使用jquery map方法。 這將提供一個對象，如果任何字段為空，則將具有一個鍵，該鍵的值將為true 。

在執行Object.values ，它將返回所有值的數組，並檢查其是否為true ，這意味着該字段中的任何一個為空，在這種情況下，可以取消按鈕狀態

也已change為keyup

 $(".follow-url-inputs").keyup(function() { let m = $(".follow-url-inputs").map(function(item) { return $(this).val() === "" }) // map will give an object // if any input is empty it will contain true if (Object.values(m).indexOf(true) !== -1) { console.log("all fiels filled in"); } else { $('.fs_btn-save').removeAttr('disabled') } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="follow-inputs text-center px-5"> <div class="input-group px-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fab fa-facebook"></i> </span> </div> <input id="facebook" class="form-control follow-url-inputs" name="facebook" placeholder="https://facebook.com/followURL" data-com.agilebits.onepassword.user-edited="yes"> </div><br> <div class="input-group px-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fab fa-linkedin"></i> </span> </div> <input id="linkedin" class="form-control follow-url-inputs" name="linkedin" placeholder="https://linkedin.com/followURL" data-com.agilebits.onepassword.user-edited="yes"> </div><br> <div class="input-group px-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fab fa-twitter"></i> </span> </div> <input id="twitter" class="form-control follow-url-inputs" name="twitter" placeholder="https://twitter.com/followURL" data-com.agilebits.onepassword.user-edited="yes"> </div><br></div> <div class="text-center"> <button class="btn btn-primary fs_btn-primary fs_btn-save" disabled onclick="setupFollowButtons()">Save</button> </div> 

Answer 3

試試這個

 $(".follow-url-inputs").each(function(index, item) { $(item).change(function() { var isEmpty = true; $('input').each(function() { if ($.trim($(this).val()) == '') { isEmpty = true; } else { isEmpty = false; } }); if (isEmpty) { console.log("isAllEmpty: "+ isEmpty); } else { $('.fs_btn-save').removeAttr('disabled') console.log("isAllEmpty: "+ isEmpty); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="follow-inputs text-center px-5"> <div class="input-group px-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fab fa-facebook"></i> </span> </div> <input id="facebook" class="form-control follow-url-inputs" name="facebook" placeholder="https://facebook.com/followURL" data-com.agilebits.onepassword.user-edited="yes"> </div><br> <div class="input-group px-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fab fa-linkedin"></i> </span> </div> <input id="linkedin" class="form-control follow-url-inputs" name="linkedin" placeholder="https://linkedin.com/followURL" data-com.agilebits.onepassword.user-edited="yes"> </div><br> <div class="input-group px-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fab fa-twitter"></i> </span> </div> <input id="twitter" class="form-control follow-url-inputs" name="twitter" placeholder="https://twitter.com/followURL" data-com.agilebits.onepassword.user-edited="yes"> </div><br></div> <div class="text-center"> <button class="btn btn-primary fs_btn-primary fs_btn-save" disabled onclick="setupFollowButtons()">Save</button> </div>