Monday, January 3, 2011

javaScript to disable radio button according to a label

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
   <form id="frm1" runat="server">
   <%--<table width="100%">
    <tr>
    <td>  <asp:RadioButton ID="rdbBase" Text="Base" runat="server" />      
    </td>
    <td>
    <asp:RadioButton ID="rdb1" Text="1 year" runat="server" />
        </td>
        <td>
        <asp:RadioButton ID="rdb2" Text="2 year" runat="server" />
            <asp:Label ID="Label1" runat="server" Text="hi"></asp:Label>
        </td>
    </tr>
    <tr>
    <td><asp:RadioButton ID="rdbBotG" Text="BOTG" runat="server" onclick ="test()"   GroupName="grpBot"/>  
    </td>
    <td colspan="2"></td>
    </tr>
    <tr>
    <td><asp:RadioButton ID="rdbBotGTurbo" Text="Turbo" runat="server" onclick ="test()" GroupName="grpBot"/>  
    </td>
    <td colspan="2"></td>
    </tr>
    </table>--%>
    <%--<table >
    <tr>
    <td>
        <asp:RadioButton ID="RadioButton1" runat="server" onClick ="test()" />
       
    </td>
    </tr>
    <tr>
    <td>
        <asp:RadioButton ID="RadioButton2" runat="server"  />
       
    </td>
    </tr>
    <tr>
    <td>
        <asp:RadioButton ID="RadioButton3" runat="server" Checked="false" />
       
    </td>
    </tr>
    </table>--%>
    <table>
    <tr>
    <td>
        <asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="False"
                                    GridLines="Horizontal" Width="600px">
                                    <Columns>
                                        <asp:TemplateField>
                                            <HeaderTemplate>
                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr id="trResidential" runat="server">
                                                        <td width="5%" align="left">
                                                        </td>
                                                        <td width="14%" style="text-align: left; color: #3366cc;">
                                                            Residential
                                                        </td>
                                                        <td width="20%" style="text-align: center;">
                                                      <asp:RadioButton ID="rdbResidBasePackage"
                                                         GroupName="gnResidential"
                                                          runat="server" />
                                                        </td>
                                                        <td width="20%" style="text-align: center">
                                                          <asp:RadioButton ID="rdbResid1Year"
                                                       GroupName="gnResidential" runat="server" />
                                                        </td>
                                                        <td width="20%" style="text-align: center">
                                                           <asp:RadioButton ID="rdbResid2Year" GroupName="gnResidential"
                                                        runat="server" />
                                               
                                                        </td>
                                                      
                                                    </tr>
                                                    <tr>
                                                        <td width="5%">
                                                        </td>
                                                        <td width="14%" style="text-align: center;">
                                                            Speed
                                                        </td>
                                                        <td width="20%" style="text-align: center;">
                                                            Base Package
                                                        </td>
                                                        <td width="20%" style="text-align: center">
                                                            1 Year
                                                        </td>
                                                        <td width="20%" style="text-align: center">
                                                            2 Year
                                                        </td>
                                                  
                                                    </tr>
                                                </table>
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <td width="5%">
                                                         
                                                       <asp:RadioButton ID="rdbTest" runat="server"  GroupName="grpT" onclick ="HighlightRow(this)"
                                                                   />
                                                        </td>
                                                        <td width="14%" style="text-align: center;">
                                                            <asp:Label ID="lblName" runat="server" Text='<%# Bind("name")%>'></asp:Label>
                                                        </td>
                                                        <td width="20%" style="text-align: right; padding-right: 40px;">
                                                            <asp:Label ID="lblBasePackage" runat="server" Text='<%# Bind("speed")%>'></asp:Label>
                                                        </td>
                                                        <td width="20%" style="text-align: right; padding-right: 40px;">
                                                            <asp:Label ID="lbl1Year" runat="server" Text='<%# Bind("year1")%>'></asp:Label>
                                                        </td>
                                                        <td width="20%" style="text-align: right; padding-right: 40px;">
                                                            <asp:Label ID="lbl2Year" runat="server" Text='<%# Bind("year2")%>'></asp:Label>
                                                        </td>                                                    
                                                    </tr>
                                                </table>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                   

                                </asp:GridView>
    </td>
    </tr>
    </table>
    </form>
</body>

<script language="javascript" type="text/javascript">
    function test() {
        try {

            if (document.getElementById("rdbBotGTurbo").checked == true) {
                document.getElementById("gvTest").checked = false;
                document.getElementById("gvTest").disabled = true;
            }
            else {
                document.getElementById("rdb2").disabled = false;
            }
        }
        catch (err) {
            alert(err.description);
        }
    }
    function HighlightRow(chkB) {
        try {
          
            var IsChecked = chkB.checked;

            if (IsChecked) {

                var mylist = chkB.parentNode.parentNode;
                //alert(trim(mylist.cells[1].innerHTML));         
                if (trim(mylist.cells[1].innerHTML) == "<span id=\"gvTest_ctl03_lblName\">BotGTurbo<\/span>") {
                   // alert("got it ");
                    document.getElementById("gvTest_ctl01_rdbResid2Year").checked = false;
                    document.getElementById("gvTest_ctl01_rdbResid2Year").disabled = true;

                }

                else {
                   // alert("Enable");
                    document.getElementById("gvTest_ctl01_rdbResid2Year").disabled = false;
                }
            }
        }
        catch (err) {
            alert("Err" + err.description);
        }

    }

    function trim(stringToTrim) {
        return stringToTrim.replace(/^\s+|\s+$/g, "");
    }
         
</script>

</html>

1 comment:

  1. It's really a practical example. Easy to understand. So hope anyone can go through and get some kind of idea about this code.

    ReplyDelete