Disabled Input fields are not actually disabled

  • I have a bunch of Input fields in a Modal form, all with v-bind:class="{ disabled: true }". They “appear” to be disabled, but you can still, click, edit text and values etc.

    I’m using 0.14.7. Is anyone else getting this problem? Here are some samples:

              <!-- IS FOR SALE -->
                label="For Sale?"
                v-bind:class="{ disabled: isForSaleDisabled }"
              <!-- IS GIVEAWAY -->
                label="This is a Give Away"
                v-bind:class="{ disabled: isGiveAwayDisabled }"

    and a screenclip shows that they are greyed out… but I can still edit in all the controls. Is this a known bug, or am I just being an idiot again?


  • here is the thing: this is not supposed to work.

    you should be using the “disable” prop, not the “disabled” class

    <q-input :disable="true">

  • line 43 here

  • duh! Facepalm. Thanks Benoit!

  • This post is deleted!

  • It is super-confusing that the “disabled” attribute on a quasar-input field shows the disabled-class, but does not disable the field. Costs me hours to find that quasar wants a “disable” attribute.
    <q-input v-model=“someData” disable>

  • Admin

    “disable” is a prop while “disabled” is the CSS class. The “disable” instead of “disabled” is due to an old Vue bug and it kind of stuck with Quasar due to legacy.

  • do you know how to disable q-input using javascript?

Log in to reply