按钮仍然禁用如果选择仍然存在，但输入框为空

所以我试图完成，仍保持“搜索”启动按钮，即使没有文字在我的输入框中。因此，我猜测关键时，代码应该检查任何和所有选定的当前值的选择框，如果没有，则禁用继续禁用搜索按钮。

但问题是，我不够聪明，无法正确编码。

这里是一个事先知情同意：

下面是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>

来源

2016-07-27 BobbyJones

所以，你想它最初禁用，但是当用户输入了一些，使用时要启用了吗？ – user8333141

试试这个：https：//jsfiddle.net/bb70t83u/。你可以删除你创建的两个函数，并使用第三个例子，它可以工作。这是否解决了您遇到的问题？ – Si8

尝试将代码置于'$（document）.ready（）'函数中，并在结束标记''之前。 – user3284463

试试这个：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) 
    } 
    }); 
})

来源

2016-07-27 17:50:30 Si8

您的代码与我的示例顶部的代码产生的结果相同。如果在下拉菜单中进行了选择以及输入框中的一些文本，如果选择被删除并且文本保留在任何输入框中，则搜索按钮保持禁用状态，搜索按钮将保持禁用状态。 – 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>

来源

2016-07-27 17:55:17 Rayon

您的代码只是一直禁用搜索按钮。 – 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>

DEMO

来源

2016-07-27 18:40:08 user3284463

不起作用。它在我的文章中产生与我的结果相同的结果。 – BobbyJones

@BobbyJones在控制台中是否有错误？ – user3284463

按钮仍然禁用如果选择仍然存在，但输入框为空

回答

相关问题