Vue Js Disable Checkbox after being Checked

<html>

<body>

<div id="app">
        <h3>Vue.js Disable Multiple Checkbox after being Checked</h3>
        <label class="checkbox" :class="{ disabled: isCheckboxDisabled('checkbox1') }">
            <input type="checkbox" :disabled="isCheckboxDisabled('checkbox1')"
                @change="handleCheckboxChange('checkbox1')" />
            <span class="checkmark"></span>
            Checkbox 1
        </label>
        <label class="checkbox" :class="{ disabled: isCheckboxDisabled('checkbox2') }">
            <input type="checkbox" :disabled="isCheckboxDisabled('checkbox2')"
                @change="handleCheckboxChange('checkbox2')" />
            <span class="checkmark"></span>
            Checkbox 2
        </label>
        <label class="checkbox" :class="{ disabled: isCheckboxDisabled('checkbox3') }">
            <input type="checkbox" :disabled="isCheckboxDisabled('checkbox3')"
                @change="handleCheckboxChange('checkbox3')" />
            <span class="checkmark"></span>
            Checkbox 3
        </label>
    </div>

// Disable the checkbox and add it to the disabledCheckboxes array
                    this.disabledCheckboxes.push(identifier);
                }
            }
        });
    </script>
    <style>
        #app {
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            width: 600px;
            margin: 0 auto;
            padding: 20px
        }

/* CSS for the checkboxes */
        input[type="checkbox"] {
            display: none;
            /* Hide the default checkbox */
        }

/* CSS for the custom checkbox */
        .checkbox {
            display: inline-block;
            position: relative;
            padding-left: 28px;
            cursor: pointer;
        }

.checkbox input[type="checkbox"]:checked+.checkmark:before {
            content: "\2714";
            /* Add a checkmark when the checkbox is checked */
        }

.checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            border: 1px solid #ccc;
            background-color: #fff;
        }

.checkmark:before {
            position: absolute;
            content: "";
            left: 7px;
            top: 3px;
            height: 10px;
            width: 5px;
            border-left: 2px solid #333;
            border-bottom: 2px solid #333;
            transform: rotate(-45deg);
            display: none;
        }

/* CSS for disabling the checkboxes */
        .checkbox.disabled {
            opacity: 0.6;
            /* Reduce the opacity of disabled checkboxes */
            cursor: not-allowed;
        }

.checkbox.disabled .checkmark {
            background-color: #ccc;
            /* Change the background color of disabled checkboxes */
        }

.checkbox.disabled .checkmark:before {
            display: none;
            /* Hide the checkmark on disabled checkboxes */
        }
    </style>
</body>

</html>