How can I disable child elements in an attribute disabled element in Polymer?
What are some neat ways to disable children if at least one of the parent elements is disabled?
I have form fields that are nested inside groups, where each group and fields can be turned off depending on the values of other fields. Several parents can be disabled independently of each other. Of course, I could query the select and iteratively disable the children, i.e. the fields of the recently disabled parent. But in order to reactivate the fields, I also need to iterate over all fields that are no longer within any disabled parent.
Or is it better to log an event for each parent? The structure has an estimated depth of 3 with about 100 elements.
The parent form field or the aria-disabled attribute will disable child fields, but this option is missing as paper elements are unaware of this.
Thanks in advance!
A little creative solution is to create two input elements, one with the attribute disabled
and the other without, and then show / hide them depending on whether the parent attribute is set disabled
.
* /deep/ input[disabled] {
display: none;
}
[disabled] /deep/ input[disabled] {
display: initial; /* or inline */
}
[disabled] /deep/ input:not([disabled]) {
display: none;
}
I haven't used yet :not()
. If that doesn't work, you can set an attribute enabled
on the included input element and use
[disabled] /deep/ input:[enabled] {
display: none;
}
I haven't tested the solution, but I think it should work, but I don't know if you are interested in this kind of solution anyway.
source to share