check checkbox status in jquery UI modal dialog

Question

I have modal jQuery UI dialog with a checkbox:

            $dialog = $('<div id="formContainer"></div>')
                        .html('<div>some text</div><input id="accept_cb" type="checkbox" checked="checked"/> Uncheck this box to disable.<br />')
                        .dialog({
                                autoOpen: false,
                                title: 'Title ',
                                modal: true,
                                buttons: {
                                    "Close": function() {
                                        checkboxHandler();
                                    },
                                    Cancel: function() {
                                        $( this ).dialog( "close" );
                                    }
                                }
                            });


            function checkboxHandler(){
                if ($('#accept_cb').is(':checked'))
                {
                  alert('checked');
                }else{
                  alert('not checked');
                }
            }

When I open the dialog the first time everything works just fine and alerts the correct checked status. But when I return a second time the status stays either 'checked' or 'not checked' whatever it was the first time. What do I need to change?

I also tried with ().attr and ().prop, same result.

Missing quote : .html(<div>some text

jazzytomato
– jazzytomato

2012-05-02 06:49:16 +00:00
Commented May 2, 2012 at 6:49 — jazzytomato
– jazzytomato, Commented May 2, 2012 at 6:49

Sinetheta · Accepted Answer · 2012-05-02 06:48:25Z

1

Closing a dialogue does not destroy it. Although you don't mention how you are opening the dialogue, I imagine that you are just running this code again. If so you are creating duplicates of all these elements. When you have 2 elements with the same ID on a page, your browser will always return the first one, hence your "whatever it was the first time".

Either .remove() the dialogue in the "close" handler, or don't re-create the contents each time.

answered May 2, 2012 at 6:48

Sinetheta

9,4495 gold badges33 silver badges52 bronze badges

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

1 Comment

lunacafu Over a year ago

This has solved it, I was removing $dialog instead of $('#formContainer'). Thanks.

Ron van der Heijden · Accepted Answer · 2012-05-02 06:43:27Z

1

In your code i see a syntax error. Pay attention on your '. Also see jQuery API for more information about checkboxes http://api.jquery.com/checked-selector/

answered May 2, 2012 at 6:43

Ron van der Heijden

15.1k7 gold badges62 silver badges86 bronze badges

Comments

Alexander Schimpf · Accepted Answer · 2012-07-11 19:00:25Z

1

Simple solution. You need to use class for checkbox and use selector with :last, because ui modal dialog made duplicate of this element.

function checkboxHandler(){
   if ($('.accept_cb:last').is(':checked'))
   {
      alert('checked');
   }else{
      alert('not checked');
   }
}

edited Jul 11, 2012 at 19:00

Alexander Schimpf

2,3921 gold badge24 silver badges39 bronze badges

answered Jul 11, 2012 at 15:26

Viktor Br

111 bronze badge

Collectives™ on Stack Overflow

check checkbox status in jquery UI modal dialog

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related