Question

I have the following asp.net code, the user has to select a row with a radiobutton, and I need to disable the button with jquery when there is no radio button selected and enable it again when there is a radio button selected.

<asp:GridView ID="GrvOpenForApproval" runat="server" 
        AutoGenerateColumns="False" Width="100%">
        <Columns>
              <asp:BoundField HeaderText="Dealer" DataField="Dealer.DealerNumber" />
            <asp:BoundField HeaderText="RequestNumber" DataField="RequestNumber" />
            <asp:BoundField HeaderText="Chassis"  DataField="Vehicle.Chassis"/>
            <asp:BoundField HeaderText="Commission" DataField="Vehicle.ComissionNumber" />
            <asp:BoundField HeaderText="Created" DataField="RequestDate" DataFormatString="{0:dd/MM/yyyy}" />
            <asp:BoundField HeaderText="Status"  DataField="CurrentStatus" />
            <asp:BoundField HeaderText="Comment" DataField="Comments" />
            <asp:TemplateField HeaderText="Select One">
            <ItemTemplate>
              <input name="RequestBaseId" type="radio" 
                        value='<%# Eval("RequesBaseId") %>' />
            </ItemTemplate>
          </asp:TemplateField>
        </Columns>
        <HeaderStyle CssClass="gridheader" />
    </asp:GridView>
    <br />
    <div class="clear hideSkiplink">
        <asp:Button runat="server" ID="BtnApproveSelected" 
            meta:resourcekey="BtnApproveSelectedResource" 
            onclick="BtnApproveSelectedClick"/>
    </div>

I tried this but its not working

Ready: function () {
            $('input[name="RequestBaseId"]').click(function () {
                if (!$(this).val()) {
                    $("#BtnApproveSelected").attr("disabled", "disabled");
                }
                else {
                    $("#BtnApproveSelected").attr("disabled", "");
                }
            });
        }

generated html

<div>

    <table cellspacing="0" rules="all" border="1" id="MainContent_GrvOpenForApproval" style="width:100%;border-collapse:collapse;">

        <tr class="gridheader">

            <th scope="col">Dealer</th><th scope="col">RequestNumber</th><th scope="col">Chassis</th><th scope="col">Commission</th><th scope="col">Created</th><th scope="col">Status</th><th scope="col">Comment</th><th scope="col">Select One</th>

        </tr><tr>

            <td>&nbsp;</td><td>1</td><td>&nbsp;</td><td>&nbsp;</td><td>24/05/2012</td><td>Approval1</td><td>123</td><td>

              <input name="RequestBaseId" type="radio"  

                        value='1' />

            </td>

        </tr><tr>

            <td>DEAL-1</td><td>1</td><td>CH1</td><td>123C</td><td>24/05/2012</td><td>Approval1</td><td>12</td><td>

              <input name="RequestBaseId" type="radio"  

                        value='2' />

            </td>

        </tr><tr>

            <td>&nbsp;</td><td>1</td><td>&nbsp;</td><td>&nbsp;</td><td>24/05/2012</td><td>Approval1</td><td>123</td><td>

              <input name="RequestBaseId" type="radio"  

                        value='3' />

            </td>

        </tr><tr>

            <td>DEAL-1</td><td>1</td><td>CH1</td><td>123C</td><td>24/05/2012</td><td>Approval1</td><td>12</td><td>

              <input name="RequestBaseId" type="radio"  

                        value='4' />

            </td>

        </tr><tr>

            <td>DEAL-1</td><td>1</td><td>CH1</td><td>123C</td><td>24/05/2012</td><td>Approval1</td><td>12</td><td>

              <input name="RequestBaseId" type="radio"  

                        value='5' />

            </td>

        </tr>

    </table>

</div>

    <br />

    <div class="clear hideSkiplink">

        <input type="submit" name="ctl00$MainContent$BtnApproveSelected" value="Approve selected request" id="MainContent_BtnApproveSelected" disabled="disabled" class="aspNetDisabled" ClientID="BtnApproveSelected" />

    </div>

Answer 1

Try this:

$('input[name="RequestBaseId"]').change(function() {
    if (!$(this).val()) {
        $("#BtnApproveSelected").prop("disabled", true);
    }
    else {
        $("#BtnApproveSelected").prop("disabled", false);
    }
});

You will also need to add a ClientID to your button:

 <asp:Button runat="server" ID="BtnApproveSelected" ClientIDMode="Static"
        meta:resourcekey="BtnApproveSelectedResource" 
        onclick="BtnApproveSelectedClick"/>

You could also make the input[name="RequestBaseId"] selector better by using a class.