forms - Angular 5 - 禁用单选按钮

Question

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

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

Answer 1

对此可以有 2 种解决方案:-

<强>1。使用禁用属性 ([attr.disabled])

此问题的一个解决方案是使用禁用属性 ([attr.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

在此示例中，名为“enabled”的单选按钮组将被启用，因为它们[attr.disabled] 设置为空，而名为“disabled”的单选按钮组将被启用尽管 [attr.disabled] 被设置为“false”但仍被禁用，这是因为 false 是一个非空值。

<强>2。使用字段集标签

针对此问题的另一个更好的解决方案是使用

标记将单选按钮组合在一起，然后在该 上设置 [disabled] 属性

标签而不是单独的单选按钮。以下是相同的示例:-

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