Enable button when checkboxes are active VueJs

Question

I am trying to find a way to activate a button when both of those checkboxes are checked. I've disabled the button but I can't think of a method of actually triggering the isActive when both of them are checked.

<div class="form-check mb-1">
    <input
        class="form-check-input"
        type="checkbox"
        id="age"
        checked
    />
    <label
        class="form-check-label"
        for="age"
        >By clicking this you agree that you
        are at least 18 years old.</label
    >
</div>

<div class="form-check mb-4">
    <input
        class="form-check-input"
        type="checkbox"
        id="terms"
        checked
    />
    <label
        class="form-check-label"
        for="terms"
        >By clicking this you agree to our
        <router-link to="/terms"
            >Terms & Conditions</router-link
        >
    </label>
</div>

<button
    :disabled="isActive"
    class="btn btn-outline-light btn-lg px-5 mb-1"
    type="submit"
>
    Register
</button>


<script>
export default {
    data() {
        return {
            isActive: true,
        };
    },
};
</script>

Mohammed · Accepted Answer · 2022-03-30 22:03:10Z

3

You should do something like

First checkbox

<input class="form-check-input" v-model="checkOne" type="checkbox" id="age" checked />

second checkbox

<input class="form-check-input" v-model="checkTwo" type="checkbox" id="age" checked />

button

<button :disabled="!checkOne || !checkTwo" class="btn btn-outline-light btn-lg px-5 mb-1" type="submit" >

answered Mar 30, 2022 at 22:03

Mohammed

1972 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Enable button when checkboxes are active VueJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related