Question

I have an jQuery dialog box, containing table with multiple checkboxes.

$("#custom-modal").dialog({
            height: 200,
            modal: true,
            buttons: { "OK": function () {
                var table1 = $("#MainContent_rtc1_customTable").html();
                alert(table1);
                //$.session('mytbl', $("#customTable").val());
                $.ajax({
                    type: "POST",
                    url: "MyPage.aspx/BindCustom",
                    data: ({ param1: table1 }),
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);
                    },
                    success: function (result) {
                        alert("success");
                    }
                });

                $(this).dialog("close");
                return true;
            }, "Cancel": function () {
                $(this).dialog("close");
                return false;
            }
            }

        });
    });

    $(':checkbox').click(function () {
        var $this = $(this);
        if ($this.is(':checked')) {
            //alert(event.target.id);
            $this.attr('checked', false);
        } else {
            //alert(event.target.id);
            $this.attr('checked', true);
        }
    });

After changing states of checkboxes, When I see html code of the table with alert(table1); (after pressing OK button); I see states of all the checkboxes as checked. So they don’t gets changed.?

Answer 1

If they are ASP check boxes then the actual check box input is not the control. besides that it would appear you are not properly binding the event, which as mentioned by wirey, is not needed if you are just trying to change the checked property.

Refer to this post if you still need to add an event handler to the check boxes:

Need to select all checkboxes and dynamically add specific event handler to each

The issue is was reported as a bug but then decalred not valid and not fixed (http://bugs.jquery.com/ticket/7594).

One thing that you could do is to handle the click event correctly and then set a custom variable that could be checked. In asp this would be difficult to check because the check boxes are not just inputs, they come packaged with a span and all classes and attributes are usually added to the span, not the box.

So depending on your needs you could do the following:

var table1;

$('.isCheckBox').each(function(){
    //default value set here
    $(this).attr('isChecked','false');
});

$('input:checkbox').click(function (event) {
    if($(this).prop('checked') == true)
    {
       $(this).attr('data-isChecked','true'); 
    }
    else
    {
        $(this).attr('data-isChecked','false'); 
    }

    table1 = $('#thetable').html();
    alert(table1);
});

with HTML of:

<table id="thetable">
<tr>
    <td><input class='isCheckBox' type="checkbox"/></td>
    <td><input class='isCheckBox' type="checkbox"/></td>
    <td><input class='isCheckBox' type="checkbox"/></td>
</tr>

Fiddle: http://jsfiddle.net/DwerK/9/

And then check for the attribute ‘data-isChecked’. You need to add the data prefix so that HTML will validate.

Now I speculate that you could add the attribute to the parent element and then check it in code behind, not sure how exactly that would work and have not had an instance to check it.

I hope that helps.

EDIT: Wirey asked to see the issue, as I understand it this illustrates the issue: http://jsfiddle.net/w22Q4/2/