Question

我创建了一个带有几个输入的表单和一个使用zurb基础的按钮，是否可以禁用该按钮，直到表单的所有字段都被参加？

Answer 1

您可以识别所有必需的输入（使用类），然后当其中任何一个更改或获得焦点时检查是否有空的输入。如果全部填满，则启用按钮。

＆＃13;

// Bind the events to the inputs
// You can use any class nedded, this covers selects too
// You even can add more events to suite your needs
$('.input-required').on('focusout change', function() {
  // We instantiate a variable to hold the button status
  var buttonDisabled = false;
  // Iterate every input
  $('.input-required').each(function() {
      // If there is any empty...
      if (!$(this).val()) {
        // We say true to the disableness of the button
        buttonDisabled = true;
      }
    })
    // Set the status to the button
  $('button').prop('disabled', buttonDisabled);
});

＆＃13;

form {
  width: 460px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form action="#">
  <input type="text" class="input-required">
  <input type="text" class="input-required">
  <input type="text" class="input-required">
  <input type="text" class="input-required">
  <input type="text" class="input-required">
  <input type="text" class="input-required">

  <hr>
  <button type="submit" disabled>Process</button>
</form>

＆＃13;

使用zurb foundation启用/禁用基于表单的其他元素的提交按钮

1 个答案: