天天看點

HTML 按鈕(button)的 disable 屬性和 disable property

SAP 電商雲 Spartacus UI shipping method radio input 的運作時設計:

HTML 按鈕(button)的 disable 屬性和 disable property

在 div 裡通過 ngFor 進行循環展開。

生成的原生 html 代碼:

HTML 按鈕(button)的 disable 屬性和 disable property
HTML 按鈕(button)的 disable 屬性和 disable property

關于 radio input 的測試頁面:

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

在原生 HTML 開發裡,我們可以通過給 input 添加 disabled property,來禁掉它。

HTML 按鈕(button)的 disable 屬性和 disable property

在 Angular 開發裡,即使我們使用下面的代碼,也不能工作:

HTML 按鈕(button)的 disable 屬性和 disable property

應該使用 disabled attribute,而不是 disabled property.

根據這個 StackOverflow 的

讨論

,看下面的代碼:

HTML 按鈕(button)的 disable 屬性和 disable property

第一組 input 是 enabled 狀态,因為 disabled 屬性為 null. 如果該屬性變為任何其他值,哪怕是字元串 “false”,也會被當成 true 對待,是以第二組會被 disabled.

指導方針:pass null to [attr.disabled] and any non-null value to disable it.

一些測試:

HTML 按鈕(button)的 disable 屬性和 disable property

嘗試一下我 buddy Michal 提到的 property binding:

HTML 按鈕(button)的 disable 屬性和 disable property
HTML 按鈕(button)的 disable 屬性和 disable property

最後的效果:兩個都具有了 disabled 屬性:

HTML 按鈕(button)的 disable 屬性和 disable property

繼續閱讀