Question

我正在使用下表...我想基于选中复选框（左侧）启用单选按钮（右侧）。取消选中该复选框时，我们要禁用btn广播。

         <table class="table">
              <thead>
                <tr>
                  <th>Select</th>
                  <th>
                    Group Name
                  </th>
                  <th>Profile</th>
                </tr>
              </thead>
              <tbody id="tabl">
                <tr *ngFor="let data of col; let i = index">
                  <td>
                    <input class="pull-left" type="checkbox" name="checkbox" value="{{data.id}}"
                      (change)="dataCheck($event,data)" />
                  </td>
                  <td> {{data.name}}</td>
                  <td>
                    <input type="radio" value="profile" name="profile" 
                       (click)="applyProfile(data.id,data.name)">
                  </td>
                </tr>

              </tbody>
            </table>

要选中此复选框，

  dataCheck(event, data) {
      if (event.target.checked) {
         this.selectedGroups.push(data.id);
          console.log("selectedGroups push", this.selectedGroups);
      } else {
         this.selectedGroups = this.selectedGroups.filter(item => {
         item !== data.id;
      });

     }
   }

有人可以帮助我吗？

Answer 1

Here是对工作代码的一堆闪电。我稍微简化了一下，并省略了HTML中定义的2个函数的实现，因为它们对于答案来说不是必需的。

<tbody id="tabl">

    <tr *ngFor="let data of col; let i = index">
      <td>
        <input #checkboxInput class="pull-left" type="checkbox" name="checkbox" value="{{data.id}}"
          (change)="dataCheck($event,data)" />
      </td>
      <td> {{data.name}}</td>
      <td>
        <input type="radio" [disabled] = '!checkboxInput.checked' value="profile" name="profile" 
            (click)="applyProfile(data.id,data.name)">
      </td>
    </tr>

</tbody>

想法是在复选框上使用模板引用，因为这是我们要查看是否选中的元素。 #checkboxInput将复选框显示为HTMLInputElement，我们可以在整个HTML的其余部分中将其用作变量。您可以详细了解HTMLInputElement here上公开的属性。

只有复选框和单选按钮具有checked属性。因此，在单选按钮上，我们将[disabled] = !checkboxInput.checked设置为属性。这就是说“如果未选中此复选框，则禁用单选按钮。如果选中此复选框，则单选按钮未被禁用”。

希望这会有所帮助。

如何在角度情况下启用以下情况的单选按钮

1 个答案: