仅在选中另一个框时如何使复选框“可选中”

Question

假设我有 3 个复选框，1 个“父”复选框和 2 个“子”复选框。

如果选中了父复选框，我希望能够选中两个子复选框中的一个或两个。

如果父复选框未选中，则两个子复选框中的任何一个都不应该被选中。

<div id="mycheckboxes">

        <label class="custom-control custom-checkbox" style="display: block">
          <input type="checkbox" class="custom-control-input" id="parentcheckbox" name="parentcheckbox"
                 [(ngModel)]="parentcheckbox1" (ngModelChange)="parentcheckbox1($event)">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">
        </label>


        <label class="custom-control custom-checkbox" style="display: block">
          <input type="checkbox" class="custom-control-input" id="childcheckbox1" name="childcheckbox1"
                 [(ngModel)]="childcheckbox1" (ngModelChange)="childcheckbox1($event)">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">
        </label>

        <label class="custom-control custom-checkbox" style="display: block">
          <input type="checkbox" class="custom-control-input" id="childcheckbox2" name="childcheckbox2"
                 [(ngModel)]="childcheckbox2" (ngModelChange)="childcheckbox2($event)">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">
        </label>

</div>

目前这些复选框中的每一个都是可选中的，重申上述内容，我正在尝试这样做，如果选中 parentcheckbox，则两个孩子是可选的，如果未选中 parent，则两个孩子是不可选中的。

Answer 1

在component.ts 文件中添加以下行：

  parentcheckbox1;
  childcheckbox1;
  childcheckbox2;
  isParentChecked = true;
  parentcheckbox(event) {
    this.isParentChecked = !event;
  }

HTML 看起来像这样：

<div id="mycheckboxes">

  <label class="custom-control custom-checkbox" style="display: block">
          <input type="checkbox" class="custom-control-input" id="parentcheckbox" name="parentcheckbox"
                 [(ngModel)]="parentcheckbox1" (ngModelChange)="parentcheckbox($event)">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
        </label>


  <label class="custom-control custom-checkbox" style="display: block">
          <input type="checkbox" class="custom-control-input" id="childcheckbox1" name="childcheckbox1"
                 [(ngModel)]="childcheckbox1" (ngModelChange)="childcheckbox1($event)" [disabled]="isParentChecked">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
        </label>

  <label class="custom-control custom-checkbox" style="display: block">
          <input type="checkbox" class="custom-control-input" id="childcheckbox2" name="childcheckbox2"
                 [(ngModel)]="childcheckbox2" (ngModelChange)="childcheckbox2($event)" [disabled]="isParentChecked">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
        </label>

</div>

我对文件做了一些更改。就像缺少span 的结束标签一样，parentcheckbox1 方法重命名为parentcheckbox 并在子复选框中添加了disabled。 这是有效的 stackblitz 链接：https://stackblitz.com/edit/angular-b5mpvv?file=src/app/app.component.html 如果遇到任何问题，请告诉我。

• 基于 cmets 的新更新： parentcheckbox 方法：

 parentcheckbox(event, child1, child2) {
    this.isParentChecked = !event;
    if (!event) {
      child1.checked = false;
      child2.checked = false;
    }
  }

HTML 更改：

<input type="checkbox" class="custom-control-input" id="parentcheckbox" name="parentcheckbox"
                 [(ngModel)]="parentcheckbox1" (ngModelChange)="parentcheckbox($event, child1, child2)">

<input type="checkbox" class="custom-control-input" id="childcheckbox1" name="childcheckbox1"
          #child1
                 [(ngModel)]="childcheckbox1" (ngModelChange)="childcheckbox1($event)" [disabled]="isParentChecked">

<input type="checkbox" class="custom-control-input" id="childcheckbox2" 
          #child2 name="childcheckbox2"
                 [(ngModel)]="childcheckbox2" (ngModelChange)="childcheckbox2($event)" [disabled]="isParentChecked">

Answer 2

对于使用 VanilaJS（非 Angular）的人

编辑：我没有使用过 Angular，所以我没有意识到有更好的方法来做到这一点。我会把这个答案留给那些想要在 VanillaJS 中做到这一点的人。

我在这里尝试了三种几乎相同的方法，均使用 javascript。对于所有这些，您需要将disabled 属性添加到子级，并将onclick 属性添加到父级，并将适当的功能复制到页面中。如果您的页面上只有其中一个，我可能会选择方法 1 或 2，否则我会使用方法 3。

1. 这只是运行一个函数，当您单击它时检查父级是否被选中，并相应地禁用/启用子级。 将onclick="toggle_children()" 添加到父复选框。
2. 这与 1 类似，但是当您调用该函数时，您还会发送该框是否被选中，因此不需要 if 语句。 将onclick="toggle_children1(this.checked)" 添加到父复选框。
3. 如果您在一个页面上使用多个这些组，这是最好的。在每个父节点上添加 onclick="toggle_children2(this.checked, children_array)"，其中 children_array 是一个数组，其中包含连接到该父节点的所有子节点的 ID。

// onclick="toggle_children()"
function toggle_children() {
  if (document.getElementById('parentcheckbox').checked) {
    document.getElementById('childcheckbox1').disabled = false;
    document.getElementById('childcheckbox2').disabled = false;
  } else {
    document.getElementById('childcheckbox1').disabled = true;
    document.getElementById('childcheckbox2').disabled = true;
  }
}

// onclick="toggle_children1(this.checked)"
function toggle_children1(state) {
  document.getElementById('childcheckbox1').disabled = !state;
  document.getElementById('childcheckbox2').disabled = !state;
}

// onclick="toggle_children2(this.checked, ['childcheckbox1', 'childcheckbox2'])"
function toggle_children2(state, children) {
  let i;
  for (i = 0; i < children.length; i++) {
    document.getElementById(children[i]).disabled = !state;
  }
}

label {
  display: block
}

<div id="mycheckboxes">

  <label>
    <input type="checkbox" id="parentcheckbox" onclick="toggle_children2(this.checked, ['childcheckbox1', 'childcheckbox2'])">Parent
    </label>
  <label>
    <input type="checkbox" id="childcheckbox1" disabled>Child1
  </label>
  <label>
    <input type="checkbox" id="childcheckbox2" disabled>Child2
  </label>
</div>

Answer 3

在父更改处理程序parentcheckbox1() 中设置一个属性，例如disableChildCheckboxes - 到 true 或 false。使用

将此绑定到子输入的disabled 属性

<input [attr.disabled]="disableChildCheckboxes || null"

此外，为处理函数和 ngModel 使用不同的名称，即两者的名称不同