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

    0_1513080126971_45a5a0fd-22d5-40c0-9683-8e47e5619599-image.png



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


Log in to reply