run function onclick of disabled checkbox

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.

You can try jQuery .something like $('checkbox:disabled').click(function(){}); — vijay, Jun 23 '12 at 05:27
possible duplicate of [How can I execute a function when a disabled checkbox is clicked?](http://stackoverflow.com/questions/6781467/how-can-i-execute-a-function-when-a-disabled-checkbox-is-clicked) — McGarnagle, Jun 23 '12 at 05:36
I did my fair share of looking and didnt see this, sorry for the duplicate question! — Osman, Jun 23 '12 at 05:43

McGarnagle · Accepted Answer · 2012-07-27T20:09:31.830

4

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
    }
});

edited Jul 27 '12 at 20:09

answered Jun 23 '12 at 05:31

McGarnagle

101,349
31
229
260

1

I thought about this, and I will give it a try thanks. To the comment on deterring users, this terms is needed to send the form so if they try sending it without clicking the accept terms they will be prompted to anyways in order to submit. – Osman Jun 23 '12 at 05:34
@vjshah I'm not sure what you mean ... I prototyped it, and it works for me as you would expect ... there's a solution elsewhere on SO though, if you like, please see the thread I linked to above. – McGarnagle Jun 23 '12 at 05:37
this works, thanks. It was much easier to implement than I thought it would be. THANKS! – Osman Jun 23 '12 at 05:39

score 1 · Answer 2 · answered Jun 23 '12 at 06:59

1

$('#chk').click(function () {
            if (confirm('Accept')) {
                $(this).attr('checked', 'checked');
            }
            else {
                 $(this).attr('checked', false); }
        });

answered Jun 23 '12 at 06:59

Light

1,077
10
33

score 0 · Answer 3 · answered Jun 23 '12 at 05:36

A disabled checkbox might not handle click events properly and would be displayed as "disabled".

But, you could try this:

add an attribute to the checkbox to store if the popup was displayed (e.g. data-popup="0")
handle the onclick event on the checkbox
if the popup was displayed (data-popup="1" ) simply return true to allow to use to check it
if the popup was not displayed (data-popup="0" ), then prevent the default behaviour, set data-popup="1" and display the popup with the terms and conditions

Another improvement, depending on the design of your popup, could be the add a new checkbox in that popup and when the user reads the terms and conditions, he can accept the terms and conditions directly from the popup. If you do that, you need to treat the click event on the checkbox in the popup and automatically check the checkbox on your page as well.

score 0 · Answer 4 · answered Jun 23 '12 at 05:40

0

@dbaseman

Here is my code. Take a look.Here,I get the alert on div but not on checkbox.

<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#checkbox, #hello").click(function(){

       alert("hello");
    });
});
</script>
</head>

<body>
<div id="checkbox">
    <p> hello</p>
<input type="checkbox" id="hello" disabled="disabled"  />
</div> 
</body>
</html>

answered Jun 23 '12 at 05:40

vijay

2,034
3
19
38

you need to catch the defult action and block it try `$("#checkbox, #hello").click(function(e){ e.preventDefault(); alert("hello"); });` as @dbaseman said – Osman Jun 23 '12 at 05:41

run function onclick of disabled checkbox

4 Answers4