我在Angular 5中有一个单选按钮组.我想使用[disabled]属性禁用某些选项.但是,我注意到只有第一个单选按钮实际上被禁用.看我的plunker:
http://plnkr.co/edit/JzFmvjUyvhPdTkbYT1YZ?p=preview
即使我硬编码[disabled] =“true”,它仍然不会禁用第二个单选按钮.我不想切换到使用< select>,所以我很好奇是否有另一种方法可以使用单选按钮.
解决方法
可以有两个解决方案: –
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
在此示例中,将启用名为“enabled”的单选按钮组,因为对于它们[attr.disabled]设置为null,而名为“disabled”的单选按钮组将被禁用,尽管设置了[attr.disabled]为“假”这是因为false是非空值.
2.使用fieldset标记
针对此问题的另一个更好的解决方案是使用< fieldset>用于将单选按钮分组在一起然后在该< fieldset>上设置[disabled]属性的标记标签而不是单个单选按钮.以下是相同的例子: –
<fieldset [disabled]=true> <input type="radio" name="test" />yes <input type="radio" name="test" />no </fieldset>