HTML 按钮(button)的 disable 属性和 disable property

SAP 电商云 Spartacus UI shipping method radio input 的运行时设计：

在 div 里通过 ngFor 进行循环展开。
生成的原生 html 代码：

关于 radio input 的测试页面：

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio

在原生 HTML 开发里，我们可以通过给 input 添加 disabled property，来禁掉它。

在 Angular 开发里，即使我们使用下面的代码，也不能工作：

// 注意：这个语法是 disabled property
[disabled]="true"

应该使用 disabled attribute，而不是 disabled property.

根据这个 StackOverflow 的讨论，看下面的代码：

<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

第一组 input 是 enabled 状态，因为 disabled 属性为 null. 如果该属性变为任何其他值，哪怕是字符串 “false”，也会被当成 true 对待，因此第二组会被 disabled.

指导方针：pass null to [attr.disabled] and any non-null value to disable it.

一些测试：

尝试一下我 buddy Michal 提到的 property binding：

最后的效果：两个都具有了 disabled 属性：

更多Jerry的原创文章，尽在：“汪子熙”:

HTML 按钮(button)的 disable 属性和 disable property相关推荐

按钮button的常用属性和事件
文章目录 1 按钮button的常用属性和事件 1 按钮button的常用属性 1 按钮button的常用属性和事件 1 按钮button的常用属性 Tag: 我们可以通过tag对按钮增加数据. pr ...
Vue设置button的disable属性
表单元素有一个disable属性,用来控制该元素是否可用. 1. 这个属性在HTML里只有1个值,用法就是 <button disable="disable">点击&l ...
disable属性导致后台接收值为null解决方法
disable属性导致后台接收值为null 类似问题解决办法 1.在提交的时候将disabled属性remove掉((加载页面的时候设置表单属性disabled=true,提交表单的时候设置表单属性 ...
在VC中编程实现按钮的启用(enable)和禁用(disable)
在VC中编程实现按钮的启用(enable)和禁用(disable)- - 方法总的说只有一个,就是调用CButton::EnableWindow()函数[毕竟CButton是从CWnd继承下来的] 具 ...
JavaFX Button常用相关属性和制作多边形按钮Button
Button常用相关属性 pickOnBoundsProperty (pick On Bounds) 表示组件的鼠标事件在边界范围处理方式,如果 pickOnBounds为true,则通过与该节点的边 ...
python按钮调用函数_Python中Button组件的属性及参数
Python中Button按钮组件常用的属性及参数设置温馨提示,文章篇幅较长,请耐心阅本篇文章中小编给大家介绍Button按钮组件的相关常用的属性以及参数的设置. 一. 常用属性使用语法变量=Bu ...
Python中Button按钮组件常用的属性及参数设置
Python中Button按钮组件常用的属性及参数设置本篇文章中小编给大家介绍Button按钮组件的相关常用的属性以及参数的设置. 一. 常用属性使用语法变量=Button(父容器(根窗口),参数 ...
C#，桌面编程入门（01）——按钮Button属性与事件、动态创建、快捷键、控件数组及自定义Button
本文是<桌面编程入门>系列文章的开山之篇. <桌面编程入门>系列文章主要介绍桌面编程的各种组件,Button,ComboBox,Panel,WebBrowser...... 类 ...
elementUI里的button使用disabled属性
学习记录: 实现在table列表中控制二次点击按钮时对应行的button为不可点击,效果图如下: 1.el-table在表格按钮标签中定义disabled属性 HTML部分代码: <div id ...

HTML 按钮(button)的 disable 属性和 disable property

HTML 按钮(button)的 disable 属性和 disable property相关推荐

最新文章

热门文章