CODEWITHSUNDEEP
javascriptjqueryjquery-uicheckbox
user1527336
user1527336

Reputation:

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

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.

Upvotes: 4

Views: 16377

Answers (2)

Irvin Dominin
Irvin Dominin

Reputation: 30993

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/

Upvotes: 3

Sergio
Sergio

Reputation: 28837

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

Upvotes: 2

Related Questions