jQuery按钮基于输入值启用/禁用？
[英]jQuery button enable/disable based on input value?
问题描述
这是我创建的测试，如何将禁用或启用按钮应用于两个输入？ 如您所见，以下代码仅适用于“ .link_address”。 因为设置了dom，所以我设置了keyup，我们仍然需要检查天气输入是否为空。 我在这里做错了什么？ 我尝试过foreach检查'input_fields_wrap'下的所有输入，也许我设置错了，但是也没有用
$(document).ready(function() { $('.confirm-btn').attr('disabled', true); var valid_check = $('.link_address') || $('.link_name'); valid_check.keyup(function() { if ($(this).val().length != 0) { $('.confirm-btn').attr('disabled', false); } else { $('.confirm-btn').attr('disabled', true); } }) });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="input_fields_wrap"> <input type="text" class="link_address"> <input type="text" class="link_name"> </div> <button class="confirm-btn">Add More Fields</button> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="./js/test.js"></script> </body> </html>
3 个解决方案
解决方案1
2 已采纳 2018-03-09 23:32:20
您当前的语句是var valid_check = $('.link_address') || $('.link_name'); var valid_check = $('.link_address') || $('.link_name'); 。
记住， || 是Javascript构造，不是某种jQuery魔术。 与jQuery结合使用时，它没有特殊的组合功能，仅表示其始终具有的含义：逻辑OR比较。
因此，您要说的是“ 如果$('.link_address')是真实值，则将valid_check设置valid_check值。否则，将valid_check设置为$('.link_name') ”。 但是，jQuery对象始终是真实的，因此它将永远不会与该表达式接触$('.link_name') 。
jQuery有它自己的方法，可以将多个选择器组合到一个对象中，下面我将对此进行演示。 （另外，您想使用prop而不是attr ，相信我）。
$(document).ready(function() { $('.confirm-btn').attr('disabled', true); var valid_check = $('.link_address,.link_name'); valid_check.keyup(function () { if ($('.link_address').val().length != 0 && $('.link_name').val().length != 0) { $('.confirm-btn').prop('disabled', false); } else { $('.confirm-btn').prop('disabled', true); } }) });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="input_fields_wrap"> <input type="text" class="link_address"> <input type="text" class="link_name"> </div> <button class="confirm-btn">Add More Fields</button> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="./js/test.js"></script> </body> </html>
解决方案2
2 2018-03-09 23:48:44
您可以执行以下操作：
注意 ： .input_fields_wrap :input在这里可能不是最好的选择器，您应确保它仅捕获相关的输入。
// Upon page load $(() => { // When user releases a key on any relevant input field $('.input_fields_wrap :input').on('keyup', () => { // Disable confirm button if at least one of them has an empty value $('.confirm-btn') .prop('disabled', $('.input_fields_wrap :input') .toArray() .some(input => $(input).val().length === 0) ); }); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="input_fields_wrap"> <input type="text" class="link_address"> <input type="text" class="link_name"> </div> <button class="confirm-btn" disabled>Add More Fields</button> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="./js/test.js"></script> </body> </html>
解决方案3
1 2018-03-09 23:33:35
当前，您有var valid_check = $('.link_address') || $('.link_name'); var valid_check = $('.link_address') || $('.link_name');
这意味着您的变量（ valid_check ）将包含一个或另一个的句柄。 由于总是找到第一个，因此不会执行（绕过）它的“或”部分。
因此，事件侦听器仅应用于第一个元素（输入），而不应用于第二个元素。
您可能需要更改选择器，以便将其应用于要考虑进行验证的所有字段。 我使用了$("input")但是如果需要的话，您可以更具体一些。
就像是：
$(document).ready(function() { // start with the button disabled $('.confirm-btn').attr('disabled', true); $(".input_fields_wrap > input").on('keyup', function() { // all the inputs into an array var inputList = $(".input_fields_wrap > input"); // check to see if one has a value length of 0 (ie no input) var isDisabled = inputList.toArray().some(f => $(f).val().length === 0); // enable/disable button now $('.confirm-btn').attr('disabled', isDisabled); }) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input_fields_wrap"> <input type="text" class="link_address"> <input type="text" class="link_name"> </div> <button class="confirm-btn">Add More Fields</button>
基于单选按钮启用或禁用按钮在jQuery中不起作用？
[英]Enable or disable button based on radio button does not work in jQuery?
使用 Javascript 基于密码输入长度启用/禁用按钮
[英]Enable/Disable button based on password input length with Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.