Question

我有一个表，该表是我通过ASP.Net代码以编程方式创建的，在每行中都有一个复选框和一个文本字段。

我似乎无法实现（至少通过jQuery）是对所有行进行迭代以检查是否选中了该复选框的所有行在文本字段中都有文本。令人困惑？让我简化一下...

我有一张桌子。该表有3行。每行都有一个复选框，一些纯文本和一个文本字段。我需要在jQuery中检查是否用户已选中其复选框的所有行在相应的文本字段中也都具有文本。

我尝试根据此处的一些答案创建一个简单的示例，但这似乎不起作用；无论输入上是否有文本，它都会显示模式。

$('#myButton').on('click', function() {
  checkInputs();
});

function checkInputs() {
  var hasEmpty = 0;
  $('#myTable tr').each(function(i, row) {
    var row = $(row);
    var checkbox = row.find('input[type*="checkbox"]');
    var textbox = row.find('input[type*="text"]');
    if (checkbox.is(':checked')) {
      if (textbox.val() == "") {
        hasEmpty = 1;
      };

    }
  });

  if (hasEmpty = 1) {
    $(function() {
      $("#dialog").dialog();
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<table id="myTable">
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
</table>

<button id="myButton">Button</button>

<div id="dialog" title="Basic dialog" style="display:none;">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

“对话框”部分是jQueryUI模式，当复选框被选中但各个输入都没有值时，我想显示该模式。为了简化起见，我在此处复制粘贴了jQueryUI示例代码。提醒实际的表是通过编程创建的ASP.Net表。

Answer 1

您的if (hasEmpty = 1)具有单个=。如下更新。

if (hasEmpty == 1)

完整代码如下。

$('#myButton').on('click', function() {
  checkInputs();
});

function checkInputs() {
  var hasEmpty = 0;
  $('#myTable tr').each(function(i, row) {
    var row = $(row);
    var checkbox = row.find('input[type*="checkbox"]');
    var textbox = row.find('input[type*="text"]');
    if (checkbox.is(':checked')) {
      if (textbox.val() == "") {
        hasEmpty = 1;
      };

    }
  });

  if (hasEmpty == 1) {
    $(function() {
      $("#dialog").dialog();
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<table id="myTable">
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
</table>

<button id="myButton">Button</button>

<div id="dialog" title="Basic dialog" style="display:none;">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Answer 2

您的主要问题是您在=语句中使用if，该语句设置一个值，而不是==或{{1} }来比较值。您也不需要对话框调用周围的其他document.ready处理程序。

这样，您可以通过在发现无效行后立即结束循环来稍微改善逻辑，如下所示：

===

$('#myButton').on('click', function() {
  if (!validateInputs())
    $("#dialog").dialog();
});

function validateInputs() {
  var valid = true;
  
  $('#myTable tr').each(function() {
    var $row = $(this);
    var $checkbox = $row.find(':checkbox');
    var $textbox = $row.find(':text');
    
    if ($checkbox.is(':checked') && $textbox.val().trim() === "") {
      valid = false;
      return false; // break loop
    }
  });

  return valid;
}

遍历ASP.Net表中的输入

2 个答案: