Hi I'm using vuetify and I created that directive so I can disable all child elements of the parent that has the "disableAll" atributte, It's working perfect with some elements (like normal inputs text), but when it's a type of checkbox ( like a switch ) they don't get disabled... could vuetify be the reason for that ? I printed the "Nodes" const and inside of that the checkbox are there. So it's finding the elements and it applies the disabled property but simply doesn't work
This is the directive
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 the html of a Switch
<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>
and 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">
The disabled property is being applied it simply doesn't work
I know that vuetify has its own Disabled property that you can add to every Node, or this disabled property used in forms. But I was trying to customize this using directives because there is some elements I don't need to have disabled.
If only want to activate the UI effect for v-switch, don't change the component state, simply you can add className=v-input--is-disabled into its Dom of v-switch like below demo:
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],
}
},
})<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.6.1/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.6.1/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<div id="app">
<v-app id="inspire">
<v-container
class="px-0"
fluid
v-disable-all
>
<v-switch
v-model="switches[0]"
:label="`Switch 1: ${switches[0].toString()}`"
></v-switch>
<v-switch
v-model="switches[1]"
:label="`Switch 1: ${switches[1].toString()}`"
></v-switch>
</v-container>
</v-app>
</div>