如果除一个以外的所有输入和文本区域均为空，请禁用表单提交按钮

Question

仅当每个输入字段都具有一个值以外的值时，才需要启用一个提交按钮。 除了一个。

HTML：

// start of form
<input type='text /> // cant be blank
<input type='text /> // cant be blank
<input type='text /> // cant be blank
<textarea type='text /> // cant be blank
<button type='submit'>Submit</button>
// end of form
<input id='subscription-input' type='text /> // exclude this one only
[...]

JS：

function doCheck(){
  var allFilled = true;
  $('input[type=text]').not('#subscription-input').each(function(){
      if($(this).val() == ''){
          return false;
      }
  });
  if (allFilled) {
    // Apply active css and enable button
    $('button[type=submit]').removeClass('form-submit--plain').addClass('form-submit--active');
    $('button[type=submit]').prop('disabled', !allFilled);
  }
}

$(document).ready(function(){
  $('input[type=text]').keyup(doCheck).focusout(doCheck);
});

基本上，我需要一种获取textarea字段的方法，因此我认为添加wilecard（ * ）可以起作用：

$('*[type=text]').not('#subscription-input').each(function(){...}

如何获取input字段和textarea字段？

Answer 1

将代码更改为：

function doCheck(){
  var allFilled = true;
  $('input[type=text]:not(#subscription-input),textarea').each(function(){
      if($(this).val() == ''){
          allFilled=false;
      }
  });
  if (allFilled) {
    // Apply active css and enable button
    $('button[type=submit]').removeClass('form-submit--plain').addClass('form-submit--active');
    $('button[type=submit]').prop('disabled', !allFilled);
  }
}

$(document).ready(function(){
  $('input[type=text]').keyup(doCheck).focusout(doCheck);
});

Answer 2

在这里，您可以使用解决方案https://jsfiddle.net/ehjxvz4j/1/

 function doCheck(){ var allFilled = true; $('input[type=text]').not('#subscription-input').each(function(){ if($(this).val() == ''){ allFilled = false; } }); if($('textarea').val() == ''){ allFilled = false; } if (allFilled) { // Apply active css and enable button $('button[type=submit]').removeClass('form-submit--plain').addClass('form-submit--active'); } $('button[type=submit]').prop('disabled', !allFilled); } $(document).ready(function(){ $('input[type=text], textarea').focusout(doCheck); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' /> <input type='text' /> <input type='text' /> <textarea></textarea> <button type='submit' disabled>Submit</button> <input id='subscription-input' type='text'/> 

Answer 3

将相同的类应用于所有字段，然后将事件附加到该类，并且ID not为：

 function doCheck() { var allFilled = true; $('.form-fields:not(#subscription-input)').each(function() { if ($(this).val() == '') { allFilled = false; } }); $('button[type=submit]').prop('disabled', !allFilled); if (allFilled) { $('button[type=submit]').removeAttr('disabled'); } } $(document).ready(function() { doCheck(); $('.form-fields').keyup(doCheck); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' class='form-fields' /> <input type='text' class='form-fields' /> <input type='text' class='form-fields' /> <textarea class='form-fields'></textarea> <input id='subscription-input' class='form-fields' type='text' /> <button type='submit'>Submit</button>