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

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果所有输入和textarea都为空，则禁用表单提交按钮

3 个答案: