Question

我正在尝试验证多个输入字段的长度，它仅适用于一个字段。我希望它是检查具有相同输入名称的所有字段，当长度相同时，请从下一步按钮中删除禁用的类。

这是我的代码...

jQuery(document).ready(function($) {
  $('input[name="date[]"]').keyup(function() {
    var DoB = [];
    $(".date").each(function(){
      DoB.push($(this).val());
    });
    if (DoB.length == 10) { 
      $('#stepname').removeClass('disabled');
    }
    else {
      $('#stepname').addClass('disabled');
    }
  });

.disabled{
   cursor: no-event;
   color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="date" name="date[]">
<input type="text" class="date" name="date[]">

<a href="#" id="stepname" class="btn disabled">Next Step</a>

希望您能理解我的问题。

预先感谢

Answer 1

发生此问题是因为新元素未与按键事件绑定。您应该在文档引用上绑定按键事件。

请尝试：-

<input type="text" class="date" name="date[]">
<input type="text" class="date" name="date[]">

<a href="#" id="stepname" class="btn disabled">Next Step</a>

.disabled{
   cursor: no-event;
   color: #ccc;
}

jQuery(document).ready(function($) {
  $(document).on("keyup", 'input[name="date[]"]', function() {
      var DoB = [];
           $(".date").each(function(){
               DoB.push($(this).val());
            });
    if(DoB.length == 10) { 
      $('#stepname').removeClass('disabled');
    }
    else {
     $('#stepname').addClass('disabled');
    }
});

Answer 2

DoB.length将为您提供数组的长度。因此，当前条件无法确定所有值是否相同。

您可以使用every()检查数组中的每个项目是否相同。另外，我更喜欢map()和get()从元素的值生成数组。

最后您还缺少});。

jQuery(document).ready(function($) {
  $('input[name="date[]"]').keyup(function() {
    var DoB = $(".date").map(function(){
      return $(this).val();
    }).get();
    var isTrue = DoB.every(v => v === DoB[0]);
    if(isTrue) { 
      $('#stepname').removeClass('disabled');
    }
    else {
      $('#stepname').addClass('disabled');
    }
  });
});

.disabled{
   cursor: no-event;
   color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="date" name="date[]">
<input type="text" class="date" name="date[]">

<a href="#" id="stepname" class="btn disabled">Next Step</a>

Answer 3

如果我了解您的问题，那么这应该是适合您的解决方案。 ;）

jQuery(document).ready(function($) {
  $('input[name="date[]"]').keyup(function() {
  	var disabled = false;
    $('input[name="date[]"]').each(function(key, element){
    	if(element.value.length < 10) disabled = true;
    });
    (disabled) ? $('#stepname').addClass('disabled') : $('#stepname').removeClass('disabled');
  });
});

.disabled {
  cursor: no-event;
  color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="date" name="date[]">
<input type="text" class="date" name="date[]">

<a href="#" id="stepname" class="btn disabled">Next Step</a>

Answer 4

您也可以尝试此方法；简单而简短：

popupView.sizeToFit()

jQuery(document).ready(function($) {
  $('input[name="date[]"]').keyup(function() {
    $(this).attr("data-ln", this.value.length>=10?"ok":"");
    if ($('input[name="date[]"]:not([data-ln="ok"])')[0]) $('#stepname').addClass('disabled');
    else $('#stepname').removeClass('disabled');
  });
});

.disabled{
   cursor: no-event;
   color: #ccc;
}

解决方案中的问题是：<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="date" name="date[]"> <input type="text" class="date" name="date[]"> <a href="#" id="stepname" class="btn disabled">Next Step</a>始终等于2。

此外，在针对每个输入DoB.length的答案中，您检查了所有不必要的输入长度。

多个输入值长度使用jQuery

4 个答案: