Question

我希望只有满足两个条件时才能启用我的提交按钮。现在它更像是当我输入第一个字段中的值时它启用一次然后当我进入下一个字段时它再次被禁用然后被启用..我想要无法释放并且直到两个输入字段条件都不满足它不应该得到启用。

＆＃13;

$('#accinput').on('keyup paste',username_check);
$('#Cusinput').on('keyup paste',username_check1);

function username_check(){ 

  var username = $('#accinput').val();
    setTimeout( function() {
 username = $('#accinput').val();
 if(username === "" || username.length < 4){
  $("#btnsubmit").prop('disabled', true);
}
else{
    $("#btnsubmit").prop('disabled', false);
}
    },100);

}

function username_check1(){ 
  var username = $('#Cusinput').val();
    setTimeout( function() {
 username = $('#Cusinput').val();
 if(username === "" || username.length < 3){
$("#btnsubmit").prop('disabled', true);
}
else{
    $("#btnsubmit").prop('disabled', false);
}
    },100);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

 <input type="text" class="btn btn-info"  id="accinput" required/>

  <input type="text" class="btn btn-info"  id="Cusinput" required>

  <input type="submit" class="btn btn-info" value="Submit Button" id="btnsubmit"  >

＆＃13;

Answer 1

使用.attr()和.removeAttr()：

function validate () {
  var inputs = $('input[type="text"]');
  if ($.grep(inputs, i => $(i).val().length > 3).length === inputs.length) {
    $("#btnsubmit").removeAttr('disabled');
  } else {
    $("#btnsubmit").attr('disabled', 'disabled');
  }
}

$('input[type="text"]').on('input', validate);
$('#add-input').on('click', function () {
  var newInput = $('<input type="text" required">');
  newInput.on('input', validate);
  $("#btnsubmit").before(newInput);
  validate();
});
validate();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div>
  <input type="text" required>
  <input type="text" required>
  <input type="submit" value="Submit Button" id="btnsubmit">
</div>
<button id="add-input">Add input field</button>

现在，它适用于任意数量的input[type="text"]元素。当然，您可以更改该选择器。例如，为您提供关注min-length课程的所有输入元素，然后选择.min-length。

Answer 2

这是一个可以帮助您的小代码。您需要在文本字段上有一个input事件，该事件将调用该函数并执行必要的条件检查。如果您有动态元素或比问题中提供的示例代码更多的元素，则此代码将起作用。您只需确保他们应该具有类名form-field：

＆＃13;

$('.form-field').on('input', checkAndEnableButton);

$(document).ready(function() {
  $("#btnsubmit").prop('disabled', true);
});

function checkAndEnableButton() {
  $("#btnsubmit").prop('disabled', true);
  var breakFlag = false;
  var enteredVal = '';
  $('.form-field').each(function() {
    enteredVal = $(this).val();
    if (enteredVal == '' || enteredVal.length < 4)
      breakFlag = true;
  });

  if (!breakFlag) {
    $("#btnsubmit").prop('disabled', false);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<input type="text" class="btn btn-info form-field" id="accinput" required/>

<input type="text" class="btn btn-info form-field" id="Cusinput" required>

<input type="submit" class="btn btn-info" value="Submit Button" id="btnsubmit">

＆＃13;

仅在满足所有文本框条件时启用提交按钮

2 个答案: