为何Angular复选框绑定固定checked值仍可切换，与React表现不同？

React的受控组件机制 #

React的表单组件如果显式传入了checked/value属性，就会变成受控组件，状态完全由上层传入的值决定。你写的<input type='checkbox' checked={true} />传入的是固定值true，且没有监听change事件更新绑定的状态，每次组件重渲染时，React都会将DOM的checked属性强制同步为传入的true，用户点击产生的临时变更会被立刻重置，因此无法切换状态。

Angular的单向属性绑定机制 #

Angular的[checked]属于单向输入绑定，仅承担「组件类状态变化时同步到DOM」的职责，默认不会反向校验DOM状态和绑定值是否一致，也不会主动覆盖DOM的已有状态：
你写的<input type='checkbox' [checked]=true />中，绑定的true是固定常量，不会发生变化，因此Angular只会在组件初始化时将DOM的checked设为true，后续不会再主动操作该属性。用户点击修改了DOM的checked状态后，没有触发Angular的同步逻辑，因此可以正常切换。

你目前通过disabled属性实现最大选中限制的方案是合理的，对用户交互提示更明确。如果不想用disabled，也可以在toggleSelectedItem方法中做判断：当选中数量已达上限时，不修改对应option.isSelected的值，Angular变更检测触发后会自动将DOM的checked同步回原有值，同样可以阻止额外选中。

内容的提问来源于stack exchange，提问作者Chandra