时间戳

首页 > 解决方案 > 检查是否所有输入都已填写以删除禁用属性

javascript - 检查是否所有输入都已填写以删除禁用属性

问题描述

我想检查所有输入是否都有一个值，如果有的话，而不是删除按钮上的 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 属性。

标签： javascriptjquery

解决方案

逻辑有点倒退。您想过滤每个变化中的所有输入。您当前的代码仅过滤更改的代码

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

推荐阅读