Disabled Input fields are not actually disabled

[A3an]

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 -->
          <q-checkbox 
            v-model="record.is_for_sale" 
            label="For Sale?"
            v-bind:class="{ disabled: isForSaleDisabled }"
          />

          <!-- IS GIVEAWAY -->
          <q-checkbox 
            v-model="record.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?

[benoitranque]

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">

[benoitranque]

line 43 here

[A3an]

duh! Facepalm. Thanks Benoit!

[oger000]

This post is deleted!

[oger000]

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>

[rstoenescu]

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

[Masaru]

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