Question

I have a checkbox that I do not want the user to have direct access to. I want them to accept some terms. To do this I want them to be able to click on a disabled checkbox which opens this mini popup (not checking the box) that contains the terms so the reader can read them and accept them. Once they accept them the popup will close and the checkbox will be checked. The issue I have is i cant figure out to run a function onclick of the disabled checkbox.

Answer 1

Handling the click on a disabled element is indeed tricky … but I don’t think it’s the desirable user experience anyway. If a checkbox is disabled, some users will see that and be disinclined to even attempt clicking it. Instead, consider intercepting the click event and using it for your own purposes using preventDefault.

<input type='checkbox' id="cb" name="cb" />

$(document).ready(function() {
    $("#cb").click(function(e) {
        // cancel click event so that checkbox remains unchecked
        e.preventDefault();

        // display popup here, then manually check the checkbox if needed
    }
});