检查是否填充了所有输入以删除禁用的属性
检查是否填充了所有输入以删除禁用的属性
提问于 2018-08-07 14:24:50
我想检查是否所有输入都有一个值，如果是的话，而不是删除按钮上的禁用属性。
下面我插入了一个代码片段，但是当只有一个输入有一个值时，这会移除属性。
$(".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>
有人能帮我检查是否所有输入都有值，而不是删除禁用的属性。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-07 14:31:09
逻辑有点颠倒。您想要过滤每一项更改中的所有输入。当前代码只筛选更改的代码。
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");
}
});Stack Overflow用户
发布于 2018-08-07 14:36:19
使用jquery方法。这将给出一个对象，如果任何字段是空的，它将有一个键，其中将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>
Stack Overflow用户
发布于 2018-08-07 14:36:29
试一试这个
$(".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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51729160
复制相关文章
相似问题
腾讯云开发者
