当表单中有多个复选框时，HTML 复选框验证会中断答案

【问题标题】：HTML checkbox validation breaks when there are multiple checkboxes in the form当表单中有多个复选框时，HTML 复选框验证会中断
【发布时间】：2017-09-11 22:18:34
【问题描述】：

在下面的表格中，如何忽略禁用的复选框。表单中的预期行为是，如果用户未选中模型复选框并单击提交按钮，则应提交表单。如果选中模型复选框，用户必须输入数据。只要页面上没有其他复选框，此行为就有效。如果有另一个复选框，并且在未选中模型复选框的情况下单击提交按钮，则会引发警报。如何忽略表单中的其他复选框以实现所需的行为？谢谢！

$(document).ready(function () {
    $('#checkModelBtn').click(function() {
      var isCheckboxChecked = $("input[type=checkbox]:checked").length;
      var isTextEntered = $("input.childModel").val().length;
      
      if ( isTextEntered || !isCheckboxChecked ) {
          //alert("validation passed!");
      } else {
          alert("Please enter the Model Number");
      }

    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<table>
<tr>
<td>
<p><h2>MODEL:</h2></p>
<input type="checkbox"> Model #
<input type="text" size="12" class="childModel"><BR>
</td>

<td>
THIS CHECKBOX BREAKS THE FUNCTIONALITY<p>
<input type="checkbox" checked disabled> Some text here</td>
</tr>
</table>

<hr>
<input type="submit" name="submit" value="submit" id="checkModelBtn"/>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

复选框需要有一个唯一的选择器。

$(document).ready(function () {
    $('#checkModelBtn').click(function() {
      var isCheckboxChecked = $("input[name='model_number']:checked").length;
      var isTextEntered = $("input.childModel").val().length;
      
      if ( isTextEntered || !isCheckboxChecked ) {
          //alert("validation passed!");
      } else {
          alert("Please enter the Model Number");
      }

    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<table>
<tr>
<td>
<p><h2>MODEL:</h2></p>
<input type="checkbox" name="model_number"> Model #
<input type="text" size="12" class="childModel"><BR>
</td>

<td>
THIS CHECKBOX BREAKS THE FUNCTIONALITY<p>
<input type="checkbox" checked disabled> Some text here</td>
</tr>
</table>

<hr>
<input type="submit" name="submit" value="submit" id="checkModelBtn"/>

【讨论】：

【解决方案2】：

要忽略您不想验证的复选框，您需要一种在验证中忽略它的方法，您可以使用输入字段来做到这一点。将复选框的选择器从 $("input[type=checkbox]:checked") 更改为 $(".childModel").prev("input[type=checkbox]:checked")

例子：

$(document).ready(function() {
  $('#checkModelBtn').click(function() {
    var isCheckboxChecked = $(".childModel").prev("input[type=checkbox]:checked").length;
    var isTextEntered = $("input.childModel").val().length;

    if (isTextEntered || !isCheckboxChecked) {
      //alert("validation passed!");
    } else {
      alert("Please enter the Model Number");
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <p>
        <h2>MODEL:</h2>
      </p>
      <input type="checkbox"> Model #
      <input type="text" size="12" class="childModel">
      <BR>
    </td>

    <td>
      THIS CHECKBOX BREAKS THE FUNCTIONALITY
      <p>
        <input type="checkbox" checked disabled> Some text here</td>
  </tr>
</table>

<hr>
<input type="submit" name="submit" value="submit" id="checkModelBtn" />

【讨论】：

匿名的懦夫反对者关心评论这个答案是错误的还是没用的？