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 words, a user will think that a checkbox is tickable, but it is not. Instead, clicking on the checkbox will cause a modal dialog to appear, giving the user more options to turn on or off the feature that the checkbox represents. If the options chosen in the dialog cause the feature to be turned on, then the checkbox will be ticked.

Now, the real problem is that for a split second, you can still see that the checkbox is being ticked.

I have tried an approach like this:

<input type='checkbox' onclick='return false' onkeydown='return false' />  $('input[type="checkbox"]').click(function(event) {     event.preventDefault();     alert('Break'); }); 

If you run this, the alert will appear, showing that the tick is visible (the alert is just there to demonstrate that it still does get ticked, in production, the alert is not there). On some users with slower machines and/or in browsers with slow renderers/javascript, users can see a very faint flicker (the flicker sometimes lasts for half a second, which is noticeable).

A tester in my team has flagged this as a defect and I am supposed to fix it. I'm not sure what else I can try to prevent the tick in the checkbox from flickering!

Answer 1

Try

event.stopPropagation(); 

http://jsfiddle.net/DrKfE/3/

Answer 2

Best solution I've come up with:

$('input[type="checkbox"]').click(function(event) {     var $checkbox = $(this);      // Ensures this code runs AFTER the browser handles click however it wants.     setTimeout(function() {       $checkbox.removeAttr('checked');     }, 0);      event.preventDefault();     event.stopPropagation(); });