Vue checkbox checked dynamically

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue checkbox checked dynamically</h3>
        <select v-model="selectedOption">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
        </select>
        <br>
        <p>If we choose the second option from the dropdown, the checkbox will be marked as checked dynamically </p>
        <input type="checkbox" v-model="isChecked" :disabled="!isOption2Selected"> Checkbox
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    selectedOption: '',
                    isChecked: false
                }
            },
            computed: {
                isOption2Selected() {
                    return this.selectedOption === 'option2';
                }
            },
            watch: {
                isOption2Selected(newValue) {
                    // Check the checkbox when option 2 is selected
                    if (newValue) {
                        this.isChecked = true;
                    }
                }
            }
        });
        app.mount('#app');
    </script>
    <style scoped>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px;
        }
      /* Style for the select element */
        select {
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

/* Style for the checkbox input */
        input[type="checkbox"] {
            margin-top: 10px;
        }

/* Style for the paragraph element */
        p {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }

/* Style for the disabled checkbox */
        input[type="checkbox"]:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
</body>
</html>

 
<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue checkbox checked dynamically</h3>
        <select v-model="selectedOption">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
        </select>
        <br>
        <p>If we choose the second option from the dropdown, the checkbox will be marked as checked dynamically </p>
        <input type="checkbox" v-model="isChecked" :disabled="!isOption2Selected"> Checkbox
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    selectedOption: '',
                    isChecked: false
                }
            },
            computed: {
                isOption2Selected() {
                    return this.selectedOption === 'option2';
                }
            },
            watch: {
                isOption2Selected(newValue) {
                    // Check the checkbox when option 2 is selected
                    if (newValue) {
                        this.isChecked = true;
                    }
                }
            }
        });
        app.mount('#app');
    </script>
    <style scoped>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px;
        }
      /* Style for the select element */
        select {
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
​
        /* Style for the checkbox input */
        input[type="checkbox"] {
            margin-top: 10px;
        }
​
        /* Style for the paragraph element */
        p {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }
​
        /* Style for the disabled checkbox */
        input[type="checkbox"]:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
</body>
</html>