Optimizing Checkbox Behavior in Bootstrap: Removing Events Without Adding the :disabled class

How can I effectively utilize the :disabled pseudo-class for checkboxes that are not selected, while also overriding any events that might influence the checking and unchecking behavior? This is essential as I intend to assign the disabled class to unselected items, ensuring they are visually marked, and concurrently, prevent users from manually selecting these checkboxes unless they are pre-selected, possibly through a condition like isReadonly using Vue.js.

 <template #cell(checked)="row">
        <b-form-checkbox :checked="checked !== null" :disabled="checked === null" />
 </template>