仅当另一个框被选中时如何制作复选框'checkable'

Question

假设我有 3 个复选框，1 个 'parent' 个复选框和 2 个 'child' 个复选框。

如果 parent 复选框被选中，我希望能够选中两个 child 复选框中的一个或两个。

如果未选中 parent 复选框，我认为两个 child 复选框中的任何一个都不应选中。

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

目前这些复选框中的每一个都是可以选中的，重申以上内容，我正在努力做到这一点，所以如果 parent 复选框被选中，那么两个 children 是可选的，如果 parent是unchecked，两个children是unchecked.

Answer 1

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

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

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

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

Answer 2

对于使用 VanilaJS 的人（不是 Angular）

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

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

这只是运行一个函数，当您单击它时检查父项是否被选中，并相应地 disables/enables 子项。将 onclick="toggle_children()" 添加到父复选框。
这与 1 类似，但当您调用该函数时，您还会发送是否选中该框，因此不需要 if 语句。将 onclick="toggle_children1(this.checked)" 添加到父复选框。
如果您在一个页面上使用多个这样的组，这是最好的。在每个父级上添加 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

在 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 link：https://stackblitz.com/edit/angular-b5mpvv?file=src/app/app.component.html 如果遇到任何问题，请告诉我。

基于评论的新更新： 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">

仅当另一个框被选中时如何制作复选框'checkable'

How to make checkboxes 'checkable' only if another box is checked

html

checkbox

angular