QCheckbox readonly style?

[rubs]

Hi, it seems the Checkbox component does not have a readonly property anymore, but it used to in the past. (BTW, I’ve never used version 0.15, but the property is there – the old demo works). Now it’s gone. I’ve tested adding a readonly property to Checkbox, but it accomplishes nothing. Am I missing something?

Thanks for any help.

[s.molinari]

You are correct in that QCheckbox has no readonly state. If you think it’s necessary, please start an issue on GH. Thanks.

Scott

[turigeza]

Isn’t the disable state the same ? disable = readonly no ?
https://codepen.io/turigeza/pen/qBEajgz

[s.molinari]

Read-only would be, it is acting visually as normal, but you can’t change it.

The other thing you can do is catch the input and change the value only when not in readOnly mode. https://codepen.io/smolinari/pen/qBEaXrd?editors=1010

Scott

[turigeza]

@s-molinari You broke it : ))
Seriously though I can not think of a use case for such a thing. Without the visual feedback it feels like the application is broken.

[metalsadman]

@rubs you can use Vue.extend of qcheckbox, and properly process the readonly attribute or make a prop of your own with your desired behavior. Though you could wrap your checkbox in a qfield and set readonly there, dunno if youd like this design tho.

[rubs]

Thanks for the feedback and the sample code. For checkboxes, readonly and disabled are similar but not exactly the same. A disabled control is typically semi-transparent and has a different cursor. A typical use case for read-only would be a View form (as opposed to an Edit form) where all componentes must be read-only, but not disabled.

[turigeza]

@rubs Well yet an other way of doing this would be css. Disable the element and then change the style of that element.
https://codepen.io/turigeza/pen/JjoRymX

.q-checkbox.disabled.readonly {
    opacity: 1!important;
}
.q-checkbox.disabled.readonly, .q-checkbox.disabled.readonly *{
    cursor: pointer !important;
}

and then add the class readonly to the element. Maybe missed some classes … but hopefully you get the idea.

[rubs]

@turigeza, thanks for the suggestion, I tested both ways but yours was simpler to implement.