How to open jQuery dialog on html CheckBox checked(using jQuery)?

Question

I want to popup a jQuery dialog when a html checkbox is checked. I'm using following code. But it's not working.

$(document).ready(function () {
        $('#chkBoxHelp').click(function () {
            if ($(this).is(':checked')) {
                $("#txtAge").dialog();
            }
        });
    });

And the html is as below:

<input type="checkbox" id="chkBoxHelp"/>
<div id="txtAge" style="display: none;">Age is something</div>

Please help me.

Also I want to uncheck the checkBox when popup will be closed. Checkbox is in a jQuery popup box. I need to open another popup on checkbox checked.

Thanks in Advance.

Hi Adeneo, thanks for your response. It's working fine in asp page. I forget to mention that the checkbox is in a jQuery popup. I need to open another popup on checkbox checked. I've also updated the question. Please help. — user1527336
– user1527336, Commented Oct 4, 2013 at 14:33

Irvin Dominin · Accepted Answer · 2013-10-04 13:01:37Z

3

You can use open and close methods and close event.

Code:

$(document).ready(function () {
    $('#chkBoxHelp').click(function () {
        if ($(this).is(':checked')) {
            $("#txtAge").dialog({
                close: function () {
                    $('#chkBoxHelp').prop('checked', false);
                }
            });
        } else {
            $("#txtAge").dialog('close');
        }
    });
});

Demo: http://jsfiddle.net/IrvinDominin/V9zMx/

edited Oct 4, 2013 at 13:01

answered Oct 4, 2013 at 12:54

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1527336 Over a year ago

Hi, thanks for your response. It's working fine in asp page. I forget to mention that the checkbox is in a jQuery popup. I need to open another popup on checkbox checked. I've also updated the question. Please help.

Irvin Dominin Over a year ago

@TempExpt so you have to opened popup at the same time? Is something in modal?

user1527336 Over a year ago

Thank you very much. Thank a lot. It's working fine. I'm marking it as solved.

Sergio · Accepted Answer · 2013-10-04 12:59:12Z

2

Try this, also closing if the checkbox is clicked again.

$(document).ready(function () {
    var the_checkbox = $('#chkBoxHelp');
    the_checkbox.click(function () {
        if ($(this).is(':checked')) {
            $("#txtAge").dialog({
                close: function () {
                    the_checkbox.prop('checked', false);
                }
            });
        } else {
            $("#txtAge").dialog('close');
        }
    });
});

Demo here

edited Oct 4, 2013 at 12:59

answered Oct 4, 2013 at 12:51

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

5 Comments

user1527336 Over a year ago

Hi, thanks for your response. It's working fine in asp page. I forget to mention that the checkbox is in a jQuery popup. I need to open another popup on checkbox checked. I've also updated the question. Please help.

Sergio Over a year ago

@TempExpt, so you mean that at some time you will have 2 dialogs open?

user1527336 Over a year ago

not at the same time. when i click on a button a div is opening as a popup. the div contains a checkbox. now i want another popup on checkbox checked.

Sergio Over a year ago

@TempExpt, you mean close the dialog with the checkbox and open a new one?

user1527336 Over a year ago

no. when i close the 2nd dialog, then checkbox(in first dialog) will be unchecked. I got solution from Irvin below. Thank you.

Collectives™ on Stack Overflow

How to open jQuery dialog on html CheckBox checked(using jQuery)?

2 Answers 2

3 Comments

Demo here

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Demo here

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related