根据单选按钮选择禁用按钮

时间:2012-05-24 12:14:52

标签: javascript jquery jquery-selectors

我有以下asp.net代码,用户必须选择一个带有radiobutton的行,我需要在没有选中单选按钮时用jquery禁用该按钮,并在选择了单选按钮时再次启用它

<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>

我尝试了这个,但它无法正常工作

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

生成的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>

1 个答案:

答案 0 :(得分:2)

试试这个:

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

您还需要在按钮中添加ClientID

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

您还可以通过使用类来更好地input[name="RequestBaseId"]选择器。