如果某些 class 为空 jquery，则使用输入文本验证 table

Question

$('.notnull').on('change keyup', function() {
  var empty;
  $('.notnull').each(function() {
    if (!$(this).val()) {
      console.log('Some fields are empty');
      empty = false;
    } else {
      empty = true;
    }
  });
  if (empty) {
    $('#add').prop('diabled', false).css('background-color', '#feaa38'); //
  } else {
    $('#add').prop('diabled', true).css('background-color', 'gray');

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="Add " id="add" name="" class="btncrud" />
<table class="table">
  <tbody>
    <tr>

      <td>
        <select id="kind" name="kind" class="notnull">
          <option></option>
          <option id="10" data-code="B" value="B">B</option>
          <option id="1" data-code="L" value="L">L</option>
          <option id="3" data-code="M" value="M">M</option>
          <option id="11" data-code="O" value="Other">Other</option>
        </select>
      </td>
    </tr>
    <tr>

      <td>
        <input type="text" id="id" name="id" value="" class="notnull">
      </td>

      <td>
        <input type="text" id="id2" name="id2" maxlength="15" class="notnull">
      </td>
    </tr>
    <tr>

      <td>
        <input type="text" id="cloa" name="cloa" maxlength="15" value="" class="InputBox">
      </td>

      <td>
        <input type="text" id="oct" name="oct" maxlength="15" value="" class="notnull">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" id="survey" name="survey" maxlength="50" value="" class="InputBox">
      </td>
      <td>
        <select id="kind2" name="kind" class="notnull InputBox">

          <option></option>
          <option id="2" value="2">2</option>
          <option id="3" value="3">3</option>
          <option id="10" value="10">10</option>
          <option id="12" value="12">12</option>
          <option id="11" value="11">11</option>
          <option id="4" value="4">4</option>
          <option id="5" value="5">5</option>
          <option id="1" value="1">1</option>
          <option id="9" value="9">9</option>
          <option id="6" value="6">6</option>
        </select>
      </td>
    </tr>
    <tr>

      <td>
        <input type="text" id="lot" name="lot" maxlength="20" value="" class="InputBox">
      </td>
      <td>
        <input type="text" id="block" name="block" maxlength="10" value="" class="InputBox">
      </td>
    </tr>
    <tr>
      <td>
        <select id="statustype" name="statustype" class="notnull InputBox">
          <option></option>
          <option id="2" label="CD" value="2">2</option>
          <option id="6" label="DT" value="6">6</option>
          <option id="3" label="DC" value="3">3</option>
          <option id="5" label="DP" value="5">5</option>
          <option id="4" label="PC" value="4">4</option>
          <option id="8" label="RC" value="8">8</option>
          <option id="1" label="SD" value="1">1</option>
          <option id="7" label="TR" value="7">7</option>
        </select>
      </td>
      <td>
        <input type="text" id="area" name="area" class="notnull InputBox">
      </td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td>
        <select id="province" name="province" class="notnull InputBox">
          <option id="26" value="26">26</option>
        </select>
      </td>
      <td>
        <select id="city" name="city" class="notnull InputBox">

          <option id="524" value="524">524</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <select id="district" name="" class="notnull InputBox">
          <option id="13609" value="13609">13609</option>
          <option id="13610" value="13610">13610</option>
          <option id="13611" value="13611">13611</option>
          <option id="13654" value="13654">13654</option>
        </select>
      </td>
      <td>
        <input type="text" id="street" name="street" maxlength="50" value="" class=" InputBox">
      </td>
    </tr>
    <tr>
      <td>
        <select id="zipcode" name="zipcode" class="notnull InputBox">

          <option id="835" value="4311">4311</option>
        </select>
      </td>
    </tr>

  </tbody>
</table>

加载页面时，我手动调用 change() 事件来调用空输入检查。我尝试了 3 种方法来检查 class notnull 是否有一个空元素。我无法正常检查。

期望：

加载时将检查 table 中是否有空输入，这用于在更新期间当用户 select 来自数据库时按钮将属性禁用将被更新。在更改中，keyup 事件假设检查是否有 class notnull 的空输入。指定了 notnull，因为其他输入不是必需的。

任何想法表示赞赏

Answer 1

给你的一些想法：

而不是检查所有 .notnull 个项目，只检查具有 keyup 事件的项目
创建一个函数，负责在输入值为空时切换 .disabled class
然后你可以在加载和 keyup 时重用这个函数
不要设置属性 disabled，因为这会阻止用户关注输入并更改它的值！

例如，HTML:

<input type="text" value="" class="notnull">
<select class="notnull">
  <option value=""></option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>

还有这个 JS 函数：

function toggleDisabled(target) {
  var $target = $(target);
  $target.toggleClass('disabled', !$target.val());
}

您可以将 .notnull 个元素存储在一个变量中：

var $notnull = $('.notnull');

加载时全部检查：

$notnull.each(function(i, el) {
  toggleDisabled(el);
});

并添加 keyup 事件侦听器：

$notnull.on('keyup change', function(e) {
  toggleDisabled(e.currentTarget);
});

这里是 working CodePen。

如果某些 class 为空 jquery，则使用输入文本验证 table

Validate table with input text if certain class is empty jquery

html

javascript

validation

jquery

is-empty