Question

这是我创建的测试，如何应用按钮禁用或启用两个输入？如您所见，以下代码仅适用于“.link_address”。我设置了keyup，因为一旦dom加载，我们仍然需要检查天气输入是否为空。我在这做错了什么？我试过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>

Answer 1

您当前的陈述是var valid_check = $('.link_address') || $('.link_name');。

请记住，||是一个Javascript构造，而不是某种jQuery魔术。当与jQuery一起使用时，它没有特殊的组合能力，它只表示它一直意味着什么：逻辑OR比较。

所以你要说的是＆＃34; 如果$('.link_address')是真值，请设置valid_check。如果没有，请将valid_check设置为$('.link_name') ＆＃34;。但是，jQuery对象总是很简洁，所以它永远不会用{1}来触及$('.link_name')。

jQuery有自己的方法将多个选择器组合到一个对象中，我已经在下面演示过了。（另外，您想使用prop代替attr，相信我）。

＆＃13;

$(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);
        }
    })
});

＆＃13;

<!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>

＆＃13;

Answer 2

以下是您可以做的事情：

注意：.input_fields_wrap :input可能不是此处的最佳选择器，您应该确保它只捕获相关的输入。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 3

目前您有var valid_check = $('.link_address') || $('.link_name');

表示您的变量（valid_check）将包含一个或另一个的句柄。由于始终找到第一个，因此它的OR部分不会被执行（旁路）。

因此，事件侦听器仅应用于第一个元素（输入），而不应用于第二个元素。

您可能希望更改选择器，使其适用于您要考虑进行验证的所有字段。我使用了$("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 (i.e. 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按钮根据输入值启用/禁用？

3 个答案: