Question

how to make a checkbox checked/unchecked based on the value sent to the Javascript function? Pls check this how to call the showModalPopup function.

---

I have a gridview:

<asp:GridView ID="GV1" runat="server" DataSourceID="DS1" >
  <Columns>

    <asp:BoundField HeaderText="ID" DataField="ID"/>

    <asp:TemplateField ShowHeader="False">
      <ItemTemplate>
        <asp:LinkButton ID="Edit_LinkButton" runat="server" CausesValidation="False" >
          <asp:Image ID="Edit_Linkbutton_Image" runat="server" ImageUrl="~/edit.png"></asp:Image>
        </asp:LinkButton>
      </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Status" Visible="False">
      <ItemTemplate>
        <asp:Label ID="Status" runat="server" Text='<%# Bind("Status") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>

  </Columns>
</asp:GridView>

And then I attach a Javascript function to the LinkButton through code-behind:

Dim myLinkButton As LinkButton

For i As Integer = 0 To GV1.Rows.Count - 1
  Dim CheckBox1 As String = TryCast(GV1.Rows(i).FindControl("Status"), Label).Text

  myLinkButton = DirectCast(GV1.Rows(i).Cells(1).FindControl("Edit_LinkButton"), LinkButton)
  myLinkButton.Attributes.Add("onclick", "shopModalPopup('" & .Rows(i).Cells(0).Text & "', '" & CheckBox1 & "'); return false;")
Next

Rows(i).Cells(0) is the first column on the Gridview, it is “ID“.

Then, the Javascript function to call the modal-box is:

<script>
                var grid_modal_options = {
                    height: 450,
                    width: 550,
                    modal: true
                };

                function shopModalPopup(Field1, Check1) {
                    var DataField1 = Field1; //--> ID
                    var CheckField1 = Check1; //--> Status

                    grid_modal_options.open = function () {
                        $('#dialog-form #Textbox1').val(DataField1);
                        $('#dialog-form #Checkbox1').checked = CheckField1;
                    };

                    $("#dialog-form").dialog(grid_modal_options);
                    $("#dialog-form").parent().appendTo('form:first');
                }
</script>

And the code for display the modal-box:

<div id="dialog-form" title="Modal-box" style="display: none;">
    <asp:TextBox ID="Textbox1" runat="server" Text="" Enabled="false">
    <asp:CheckBox ID="Checkbox1" runat="server"/>
</div>

The code above doesn’t check the checkbox but for the textbox value assigned succesfully. I need the checkbox one is also assigned by the javascript. How can I do that? Thank you very much.

Answer 1

Use the .prop() command:

$("#dialog-form #Checkbox1").prop("checked", CheckField1);

http://api.jquery.com/prop/