Javascript validation for a dynamic gridview have checkbox

Question

Hi,

I have created a GridView Dynamically. This dynamic gridview has two Template Field column. Both the column has checkboxes in every row. How do I write the client side validation so that only one checkbox is checked at a given time in a particular row.

I tried using this code but it didn't work

  function MutExcCheckBox()
  { 
    var wipChk = document.getElementById("ckhBoxSelect");
    var aukChk = document.getElementById("chkBoxABC");
    for(i = 0; i<wipChk.length ; i++)
    {
        if(wipChk[0].checked==true)
        {
          aukChk[0].checked=false;

        }else if (aukChk[0].checked==true)
        {
            wipChk[0].checked=false;
        }
    }

I have added the Onclick attribute from code behind.

ckh.Attributes.Add("Onclick", "MutExcCheckBox()");

Thanks

Answer 1

First of all go to jQuery site and download latest version of jQuery. Include this in your page.

EDIT:- I'm very sorry it the first solution didn't work for you. Actually when GridView and controls contained in it are rendered, they are wrapped in side don't know what :) Here is aspx code:

<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Checkbox 1">
            <ItemTemplate>
                <asp:CheckBox ID="chkFrist" CssClass="chk1" runat="server" 
                          Text='<%# Eval("Chk1") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Checkbox 2">
            <ItemTemplate>
                <asp:CheckBox ID="chkSecond" CssClass="chk2" runat="server" 
                         Text='<%# Eval("Chk2") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

JS (jQuery), you can add this anywhere before body tag or inside head. I prefer to add scripts just above closing body tag and inclusion of external scripts inside head tag.

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $(".chk1 :checkbox, .chk2 :checkbox").click(function() {
            checkGrid(this);
        });
    });

    function checkGrid(elem) {
        var chkd = $(elem).attr("checked");
        //WHEN YOU SPECIFY CSSCLASS ON CHECKBOX IT IS WRAPPED 
        //INSIDE A SPAN ELEMENT WITH GIVEN CLASS
        var cls = $(elem).parent().attr("class");

        if (chkd) {
            if (cls == "chk1")
                $(elem).parents("tr").find(".chk2  :checkbox")
                           .attr('checked', !chkd);
            else
                $(elem).parents("tr").find(".chk1 :checkbox")
                           .attr('checked', !chkd);
        }
    }
</script>

Answer 2

Thanks, I could do this with simple javascript.