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

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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...