Javascript 选中/未选中时，角度2启用/禁用表中的无线电输入

我已经创建了一个表，其中使用单选按钮设置前3行的优先级。目标是在选中/取消选中时启用/禁用同级单选按钮。通过在每一行上提供相同的名称，我可以在垂直方向上检查/取消检查按钮，但我无法在水平方向上对其同级进行检查

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }

我尝试在输入元素上使用（[attr.disabled]=“boolean”），但这会禁用表中的所有按钮。我也试着用javascript来做，但是它让代码变得很长，这仍然不是完美的

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }

如果有人能帮忙的话

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }

下面是我的代码

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }

HTML

<tr *ngFor="let news of newss">
<td>{{ news.newstitle }}</td>
<td>{{ news.newsdescription }}</td>
<td>{{ news.display }}</td>
<td>{{ news.status }}</td>
<td><span> {{ news.photo }}</span></td>
<td>
  <div class="radio">
    <label><input type="radio" name="priority1" #priority1 
  (change)="handleChange($event, news, priority1)" 
  [attr.disabled]="disprior1" /></label>
  </div>
  <div class="radio">
    <label><input type="radio" name="priority2" #priority2 
  (change)="handleChange($event, news, priority2)" 
  [attr.disabled]="disprior2" /></label>
  </div>
  <div class="radio">
    <label><input type="radio" name="priority3" #priority3 
  (change)="handleChange($event, news, priority3)" 
  [attr.disabled]="disprior3" /></label>
  </div>          
</td>
</tr>  

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }

{{news.newsttitle}
{{news.newsdescription}
{{news.display}
{{news.status}
{{news.photo}

---

您只需在*ngFor中声明索引，并使用它为每组单选按钮设置[name]属性

我可以建议使用以下库吗：

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }

非常容易使用和非常强大。我以以下方式使用复选框：

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }

<p-checkbox *ngFor="let part of partsLoaded; let i = index"
                        name="group1"
                        label="{{ part }}"
                        value="{{ part }}"
                        [(ngModel)]="selectedParts"
                        (click)="showOrHidePart()"
                        (mouseover)="selectMesh(part, i)"
                        (mouseout)="deSelectMesh(part, i)"
                        [class.active]="i == selectedMeshIndex"
                        [class.no-mesh]="getStyle(part)"
                        [disabled]="getStatus(part)">{{ part }}
            </p-checkbox>

---

你可以为你的收音机盒做类似的事情。您还可以利用name属性的使用来实现您的目标。Dino

新闻对象中是否有唯一的值，即ID？我不确定我是否理解您想要做什么，首先，您使用单选按钮而不是复选框，并且您正在谈论取消选中并选中它们。您还想在单击一行时禁用所有其他行，或者您想要什么？：）这会使整个小组排成一行。我们需要禁用选中按钮的行和列。

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }