Question

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

＆＃13;

<nav>
  <md-list>
    <md-list-item routerLinkActive="link-active" *ngFor="let menuItem of navigationMenuService.getNavigationMenuItems()">
      <a (click)="navigationMenuService.navigateToItem(menuItem)">
        <md-icon>{{menuItem.iconName}}</md-icon><span *ngIf="navigationMenuService.getStatus() == navigationMenuService.navigationMenuStatuses.IconsAndLabels">{{menuItem.label}}</span>
      </a>
    </md-list-item>

  </md-list>
</nav>

＆＃13;

$(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");
      }

    });
  });

＆＃13;

Answer 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"/>

Answer 2

要忽略您不想验证的复选框，您需要在验证中忽略它，并且可以使用输入字段执行此操作。将复选框的选择器从$("input[type=checkbox]:checked")更改为$(".childModel").prev("input[type=checkbox]:checked")

示例：

＆＃13;

$(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");
    }

  });
});

＆＃13;

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

＆＃13;

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

2 个答案: