Hi everyone,
I am having trouble setting the disabled status of a checkbox.
I get the html element for the checkbox with a querySelector:
let myCheckbox: HtmlInputElement | null = document.querySelector("#idOfMyIgxCheckbox");
(I can't use a ViewChild at this point, because the checkbox is not displayed directly when creating the view / the component in which the checkbox is used)
There I have the possibility to set the disabled state of this checkbox:
myCheckbox.disabled = true;
But setting this property has no effect. After setting this proprty to true, the checkbox is still enabled and can be edited.
Could you please suggest a solution on how I can change the disabled state of a checkbox.
Thanks in advance and best regards
Michael
Hello Michael,
I’ve investigated your question regarding the disabled property of the checkbox element. I would recommend setting it within the html template “<igx-checkbox [disabled]="boolean">. I’ve prepared a small sample where with a button you can hide/show the checkbox and with a second button disable/enable it. The disabled state persists even if the checkbox is visible or not.
Please take a look at them and let me know if I may be of any further assistance.
Regards, Aleksandar Atanasov, Infragistics.
Hi Aleksandar,
thank you for your response.
Unfortunately, I don't have access to the html-file at this point, so I cannot use the property in the template.
Therefore I have to set this property in a different way.
Could you maybe show a way how the disabled propety can be changed without direct access to the template.
Many thanks and best regards
In the scenario where you don’t have access to the html template, I’d recommend getting the checkbox with ViewChild where static is set to false. This will ensure that the element would be accessed only if it exists in the html, however, it will not be available in the onInit event. This is the updated sample demonstrating the behavior. In the example I’ve used a setter method that applies the disabled property whenever the checkbox exists in the view. It is wrapped within a setTimeout function to prevent an error for multiple changes in a single change event.
Please test it on your side and let me know if you need further assistance.