Prevent checkbox from ticking/checking COMPLETELY

Question

I have been asked to disable the \"ticking\" of a checkbox. I am not being asked to disable the checkbox, but to simply disable the \"ticking\".

In other w

Answer 1

Wrap the checkbox with another element that somehow blocks pointer events (probably via CSS). Then, handle the wrapper's click event instead of the checkbox directly. This can be done a number of ways but here's a relatively simple example implementation:

$('input[type="checkbox"').parent('.disabled').click( function() {
    
    // Add in whatever functionality you need here
    
    alert('Break');
    
});

/* Insert an invisible element that covers the checkbox */
.disabled {
    position: relative;
}
.disabled::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

Note: You could also add the wrapper elements programmatically, if you would like.