0

In react

<input type='checkbox' checked={true} />

makes the checkbox non toggleable.

However the same in angular makes it toggleable?

<input type='checkbox' [checked]=true />

My use case is multi select dropdown with an max selection value in it. So if the selection is maxed I shouldn't let the user select an option.

Currently I've made it using disabled option something like this.

<input type="checkbox" [name]="option.label" [checked]="option.isSelected"
               [disabled]="!option.isSelected && max === selected.length"
               (change)="toggleSelectedItem(option.id)">

But I would like to know the reason behind such behaviour in angular? By such behaviour I mean in react if the checked attribute is set to true it doesn't allow user to check or uncheck the item which is what is expected. Why isn't it the case with angular?

Shyam Joshi
  • 830
  • 7
  • 18
Chandra
  • 1
  • 2
  • Such behaviour? What behaviour? – Nitheesh Nov 16 '21 at 13:10
  • Why does it angular let the user toogle the checkbox even the value of checked is set to true? – Chandra Nov 16 '21 at 13:11
  • Don't understand the meaning of the expression, can you describe clearly? – vueAng Nov 16 '21 at 13:12
  • 3
    Value of `checked` only determines whether the input is checked by default. It wont prevent user from updating that input. If you want the user not to update it again, you have to inverigate on the `disabled` property. – Nitheesh Nov 16 '21 at 13:13
  • 2
    @Chandra Because `checked` is used to determine the default value (checked or not checked), not if it's possible to change the value or not. Your solution with [disabled] is the good way to go I think. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-checked – Junior Dussouillez Nov 16 '21 at 13:13
  • 2
    _But I would like to know the reason behind such behaviour in angular_ .. It is not angular's behaviour but HTML standard behaviour – Suraj Rao Nov 16 '21 at 13:15
  • 1
    Are you sure it works like that in react? You need to set `disabled={true}` – Suraj Rao Nov 16 '21 at 13:16
  • Thanks JuniorDussouillez and Nitheesh @Suraj Rao yes that's how it behavious in react https://codesandbox.io/s/vigorous-darkness-b1whq?file=/src/App.js:99-102 – Chandra Nov 16 '21 at 13:17
  • Not sure about how it works in Angular, but [does this help](https://stackoverflow.com/questions/41176582/enable-disable-a-button-in-pure-javascript/41176769#41176769) because in HTML, `checked` is a Boolean attribute, like `disabled` that is discussed in my link? – Scott Marcus Nov 16 '21 at 13:28
  • @Chandra with `checked` in react, you need to use onChange to change the checked boolean value. With `defaultChecked` you depend on Html. Angular uses native HTML...https://github.com/facebook/react/issues/13167 – Suraj Rao Nov 16 '21 at 13:33
  • Thanks @suraj noted – Chandra Nov 16 '21 at 13:37
  • `[defaultChecked]="true" #cbx (change)="cbx.checked = cbx.defaultChecked"` – yurzui Nov 16 '21 at 13:39
  • "This behavior" in react is only possible because you did not provide a model that holds the state and gets updated if you checked/unchecked the checkbox. Therefore it "does not change" at all. – Philipp Meissner Nov 16 '21 at 14:03

0 Answers0