Usuario:ManuelRomero/Usuario:ManuelRomero/vuejs

De WikiEducator
< Usuario:ManuelRomero
Revisión a fecha de 09:06 13 nov 2017; ManuelRomero (Discusión | contribuciones)

(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)
Saltar a: navegación, buscar

Controlar disabled/enabled de un submit con ckeckboox

Tengo unos checkbox El submit se habilita o no según tenga alguno selecconado 

<!DOCTYPE html>
 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://unpkg.com/vue'></script>
</head>
<body>
<div id="app">
    <form action="">
        <input type="checkbox" value="a" name="c[]" @click="actualiza($event)" v-model="c">a<br/>
        <input type="checkbox" value="b" name="c[]" @click="actualiza($event)" v-model="c">b<br/>
        <input type="checkbox" value="c" name="c[]" @click="actualiza($event)" v-model="c">c<br/>
        <input type="checkbox" value="d" name="c[]" @click="actualiza($event)" v-model="c">d<br/>
        <input type="checkbox" value="e" name="c[]" @click="actualiza($event)" v-model="c">e<br/>
        <input type="submit" value="enviar" :disabled="deshabilitado">
        <h1>{{ c }}</h1>
 
    </form>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            c: [],
            deshabilitado: '',
 
        },
        methods: {
            actualiza: function (event) {
                if (event.target.checked)
                    this.deshabilitado = false;
                else {
                    var n = this.c.length;
                    this.deshabilitado = ((n - 1) > 0) ? false : true;
                }
            }
        }
 
    })
</script>
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/Usuario:ManuelRomero/vuejs&oldid=22458»