Question

我在Angular 5中有一个单选按钮组。我想使用[disabled]属性禁用某些选项。但是，我注意到只有第一个单选按钮实际上被禁用。看我的plunker：http://plnkr.co/edit/JzFmvjUyvhPdTkbYT1YZ?p=preview

即使我硬编码[disabled]="true"，它仍然没有禁用第二个单选按钮。我不想切换到使用<select>，所以我很好奇是否有另一种方法可以使用单选按钮。

Answer 1

可以有两种解决方案： -

<强> 1。使用disabled属性（[attr.disabled]）

此问题的一个解决方案是使用disabled属性（ [attr.disabled] ）而不是disabled属性（ [disabled] ），但 [attr.disabled] 的工作方式略有不同，要启用您需要将null传递给 [attr.disabled] 的任何非空值按钮以及任何非空值来禁用它。请考虑以下示例： -

<input type="radio" name="enabled" [attr.disabled]="null" />Enabled1
<input type="radio" name="enabled" [attr.disabled]="null" />Enabled2

<input type="radio" name="disabled" [attr.disabled]="false" />Disabled1
<input type="radio" name="disabled" [attr.disabled]="false" />Disabled2

在此示例中，名为＆＃34;的单选按钮组已启用＆＃34;将启用，因为对于他们 [attr.disabled] 设置为null，而名为＆＃34;禁用＆＃34;的单选按钮组。尽管 [attr.disabled] 设置为＆＃34; false＆＃34;这是因为 false 是一个非空值。

<强> 2。使用fieldset标记

针对此问题的另一个更好的解决方案是使用＆lt; fieldset＆gt; 标记将单选按钮分组在一起，然后在上设置 [disabled] 属性>＆lt; fieldset＆gt; 标记，而不是单个单选按钮。以下是相同的示例： -

<fieldset [disabled]=true>
    <input type="radio" name="test" />yes
    <input type="radio" name="test" />no
</fieldset>

Answer 2

它可以像[attr.disabled]="isDisabledState === true"

一样正常工作

在组件类中，您可以拥有isDisabledState: boolean = true

Answer 3

解决问题的一种方法是将禁用的绑定放在组中的最后一个单选按钮上。以下是代码的修改版本：http://plnkr.co/edit/v6S5G7Do5NAMKzZvNdcd?p=preview

<input type="radio" name="answer" value="Yes" [(ngModel)]="name" /> Yes
<input type="radio" name="answer" value="No" [(ngModel)]="name" [disabled]="isDisabled()" /> No

禁用（使用[已禁用]）Angular模板驱动的单选按钮时出现错误和设计问题。

我修复了此拉取请求中的错误：https://github.com/angular/angular/pull/20310

设计问题是我们将[disabled]绑定放在单个单选按钮上，但它是受数据绑定影响的所有组。以下是代码的修改版本，用于说明问题：http://plnkr.co/edit/3yRCSPsdjXqhUuU9QEnc?p=preview

Answer 4

考虑到DrNio的答案你应该使用attr.disabled并将值设置为[value] =“'是'”。这是因为赋值为“是”会使角度将其评估为表达式而不仅仅是值。因此，您的输入元素将是：

<input type="radio" name="answer" [value]="'Yes'" [(ngModel)]="name"   [attr.disabled]="isDisabled()"  />

Answer 5

这是您更新的运行代码和punker ..

Update Plunker

@Component({
  selector: 'my-app',
  template: `
    <form>
      Hello {{name}}!!!
      <input type="checkbox" name="dus" [(ngModel)]="isDisabled">
      <input type="radio" name="answer" value="Yes" [(ngModel)]="name" [disabled]="isDisabled" /> Yes
      <input type="radio" name="answer" value="NO" [(ngModel)]="name"  [disabled]="isDisabled" /> No
    </form>
  `,
})
export class App {
  name = 'Yes';;
  isDisabled = true;
}

Answer 6

我最后作弊。我没有为两个单选按钮使用相同的名称，而是为每个单选按钮指定了一个唯一的名称，并将它们绑定到相同的后备字段。 http://plnkr.co/edit/zNbODcAqZMgjXfluxhW6?p=preview

@Component({
  selector: 'my-app',
  template: `
    <form>
      Hello {{name}}!!!
      <input type="radio" name="answer1" value="Yes" [(ngModel)]="name" [disabled]="isDisabled1()" /> Yes
      <input type="radio" name="answer2" value="No" [(ngModel)]="name"  [disabled]="isDisabled2()" /> No
    </form>
  `,
})
export class App {
  name:string;
  isDisabled1(): boolean {
    return false;
  },
  isDisabled2(): boolean {
    return false;
  }
}

由于它们都绑定到相同的支持字段，因此它们最终是互斥的，表现出单选按钮的方式。它还允许它们被独立禁用。

在我的真实场景中，我实际上只使用(click)事件进行单向绑定来设置绑定值，但这是同样的伎俩。

Answer 7

使用此方法：（用于反应式方法）

 <input
    type="radio"
    id="primaryIPV6"
    value="2"
    [attr.disabled]="flagValue ? '' : null"
    formControlName="p_ip_type"
    (change)="optionalFn()">

null：false和true /''：为true

Answer 8

我正在与离子产品一起工作，以下是我的工作。

<ion-radio class="fix-radio_button" *ngIf="!IsSuspended" color="default" [disabled]="q.QuestionOptionId==q.AnswerId" [checked]="q.QuestionOptionId==q.AnswerId"></ion-radio>

Angular 5 - 禁用单选按钮

8 个答案: