No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    QCheckbox readonly style?

    Help
    4
    9
    1196
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • rubs
      rubs last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

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

        Scott

        1 Reply Last reply Reply Quote 0
        • T
          turigeza last edited by

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

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by 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

            T 1 Reply Last reply Reply Quote 0
            • T
              turigeza @s.molinari last edited by

              @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.

              1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman last edited by 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.

                1 Reply Last reply Reply Quote 0
                • rubs
                  rubs last edited by 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.

                  1 Reply Last reply Reply Quote 0
                  • T
                    turigeza last edited by

                    @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 1 Reply Last reply Reply Quote 0
                    • rubs
                      rubs @turigeza last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post