按钮仍然禁用如果选择仍然存在,但输入框为空
我真的需要你的帮助,按钮仍然禁用如果选择仍然存在,但输入框为空
所以我试图完成,仍保持“搜索”启动按钮,即使没有文字在我的输入框中。因此,我猜测关键时,代码应该检查任何和所有选定的当前值的选择框,如果没有,则禁用继续禁用搜索按钮。
但问题是,我不够聪明,无法正确编码。
下面是HTML标记:
window.onload = function() {
$(document).on('change', 'select', function() {
if (this.value.length > 0) {
$('#search').prop('disabled', false)
} else {
$('#search').prop('disabled', true)
}
});
$(document).on('change keyup', 'input', function() {
if (this.value.length > 0) {
$('#search').prop('disabled', false)
} else {
$('#search').prop('disabled', true)
}
});
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<br>Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br>
<br>Vegetable
<input type="input" id="veggie">
<br>
<br>Number
<input type="input" id="number">
<br>
<br>
<input type="button" value="search" id="search" disabled>
</body>
</html>
试试这个:https://jsfiddle.net/bb70t83u/
我同时取出你的函数,并把在文件就绪功能里面。我只为select
做过。您可以对input
执行相同操作。让我知道你是否需要帮助。
这是基于我认为你说的。请澄清,如果这不是你在找什么。
JQuery的:
$(function() {
$("select").on("change", function() {
if (this.value.length > 0) {
$('#search').prop('disabled', false)
}
else {
$('#search').prop('disabled', true)
}
});
})
您的代码与我的示例顶部的代码产生的结果相同。如果在下拉菜单中进行了选择以及输入框中的一些文本,如果选择被删除并且文本保留在任何输入框中,则搜索按钮保持禁用状态,搜索按钮将保持禁用状态。 – BobbyJones
因此,如果选择是空的,但文本框中有文本,请保持按钮启用? – Si8
类似这样的:https://jsfiddle.net/bb70t83u/1/ – Si8
验证对用户进行任何操作整个表格,
window.onload = function() {
var validateForm = function() {
return $(':input').filter(function() {
return this.value === '';
}).length;
}
$(document).on('change keyup', ':input', function() {
$('#search').prop('disabled', validateForm());
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<br>Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br>
<br>Vegetable
<input type="input" id="veggie">
<br>
<br>Number
<input type="input" id="number">
<br>
<br>
<input type="button" value="search" id="search" disabled>
您的代码只是一直禁用搜索按钮。 – BobbyJones
@BobbyJones如果所有的输入都被填满,那么只有按钮会被启用。 – Rayon
尝试在$(document).ready()
功能包装你的代码。
<script>
$(document).ready(function(){
$(document).on('change', 'select', function() {
if (this.value.length > 0 || $('input').value.lenght > 0) {
$('#search').prop('disabled', false)
} else {
$('#search').prop('disabled', true)
}
});
$(document).on('change keyup', 'input', function() {
if (this.value.length > 0 || $('select').value.lenght > 0) {
$('#search').prop('disabled', false)
} else {
$('#search').prop('disabled', true)
}
});
})
</script>
<!--- Just before body tag --->
</body>
不起作用。它在我的文章中产生与我的结果相同的结果。 – BobbyJones
@BobbyJones在控制台中是否有错误? – user3284463
所以,你想它最初禁用,但是当用户输入了一些,使用时要启用了吗? – user8333141
试试这个:https://jsfiddle.net/bb70t83u/。你可以删除你创建的两个函数,并使用第三个例子,它可以工作。这是否解决了您遇到的问题? – Si8
尝试将代码置于'$(document).ready()'函数中,并在结束标记'