Disable option added to node not working with vuetify

Question

Hi I'm using vuetify, I created this directive so that I can disable all child elements of a parent with "disableAll" attribute, it works perfectly with some elements like normal input text, but when It's a type when checkboxes (like switches) they don't get disabled... could vuetify be the cause? I printed the "Nodes" constant, which has the checkboxes. So it's finding the element and applying the disabled attribute, but it's not working at all

This is the instruction

directives: {
        
    disableAll: {

      componentUpdated: (el) => {
        const tags = ['input', 'button', 'textarea', 'select'];
        tags.forEach(tagName => {
          const nodes = el.getElementsByTagName(tagName);
          for (let i = 0; i < nodes.length; i++) {
            nodes[i].disabled = true;
            nodes[i].tabIndex = -1;
          }
        });
      }
    },

This is Switch’s html

<div class="col">
   <div class="v-input my-0 v-input--is-label-active v-input--is-dirty theme--light v-input--selection-controls v-input--switch primary--text">
      <div class="v-input__control">
         <div class="v-input__slot">
            <div class="v-input--selection-controls__input">
               <input aria-checked="true" id="input-414" role="switch" type="checkbox" aria-disabled="false" value="true" disabled tabindex="-1">
               <div class="v-input--selection-controls__ripple primary--text"></div>
               <div class="v-input--switch__track theme--light primary--text"></div>
               <div class="v-input--switch__thumb theme--light primary--text">
                  <!---->
               </div>
            </div>
            <label for="input-414" class="v-label theme--light" style="left: 0px; right: auto; position: relative;">Habilitar cartas</label>
         </div>
         <div class="v-messages theme--light primary--text">
            <div class="v-messages__wrapper"></div>
         </div>
      </div>
   </div>
</div>

As you can see in this line

<input aria-checked="true" id="input-414" role="switch" type="checkbox" aria-disabled="false" value="true" disabled tabindex="-1">

Applying disabled attributes It doesn't work at all

I know that vuetify has its own disabled attribute that you can add to each node or use this disabled attribute in your form. But I'm trying to customize this using directives because there are some elements that I don't need to disable.

Answer 1

If you only want to activate the UI effect of v-switch, do not change the component state, just add className=v-input--is-disabled to v In the Dom of -switch, the following demonstration is given:

Vue.directive('disable-all', {
  inserted: function (el) {
    el.querySelectorAll('div.v-input.v-input--switch').forEach(item => {
      item && item.classList.add('v-input--is-disabled')
    })
  }
})

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      switches: [true, false],
    }
  },
})

sssccc
sssccc
sssccc

[email protected]/css/materialdesignicons.min.css"  rel="stylesheet" type="text/css">

[email protected]/dist/vuetify.min.css"  rel="stylesheet" type="text/css">