表格 – Angular 5 – 禁用单选按钮

发布时间：2020-12-17 06:49:53 所属栏目：安全来源：网络整理

导读：我在Angular 5中有一个单选按钮组.我想使用[disabled]属性禁用某些选项.但是,我注意到只有第一个单选按钮实际上被禁用.看我的plunker： http://plnkr.co/edit/JzFmvjUyvhPdTkbYT1YZ?p=preview 即使我硬编码[disabled] =“true”,它仍然不会禁用第二个单选按

我在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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!