Enable click button when a radio button is selected

Question

I have a list of radio buttons generated dynamically by a list view. The user selects one radio button and click the Update button to update his data. I want to keep the button disabled until the user makes his selection. How can I accomplish that?

<asp:ListView ID="ListView1" runat="server" DataKeyNames="ID_BG" DataSourceID="SqlDataSource_BGlist">
            <ItemTemplate>
                <itemtemplate>                
            <label><input id="Radio1" name="BG_list" type="radio" runat="server" value='<%# Eval("BG_fileName") %>'/>
                <img alt="" style="width:150px" src="/Members/images/BG/icons/<%# Eval("BG_fileName") %>"></label>                 
        </itemtemplate> ....



    <asp:Button disabled="disabled" CssClass="btn btn-default" ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Change" OnClientClick="return confirm('Are you sure you want to change your Background Image?');" />

Bhushan Kawadkar · Answer 1 · 2014-07-30T10:54:38.983

1

Try this: bind change event to radio button using .on() as radio buttons generated dynamically and enable update button inside it.

$(function(){
 $(document).on('change','input[name="BG_list"]',function(){
    $('#UpdateButton').removeAttr('disabled');
 });
});

EDIT - use update button id like $("#<%=UpdateButton.ClientID %>").removeAttr('disabled'); as mentioned in @pid answer. As I am not asp.net developer so don't know about this that actual id could be different.

edited Jul 30 '14 at 10:54

answered Jul 30 '14 at 10:46

Bhushan Kawadkar

28,279
5
35
57

Thanks but the script doesn't find the button as explained above – Gloria Jul 30 '14 at 11:12

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

Ciao Gloria,

You should add jQuery and then this piece of code in the header:

$(function () {
  $("input[id*='Radio1']").click(function () {
    $("#<%=UpdateButton.ClientID %>").removeAttr('disabled');
  });
});

To have ASP.NET supplanting <%=UpdateButton.ClientID %> with the actual ID of the control, you must enable the head as a server-side control, because ASP.NET will otherwise not check the content of <head> neither nested <script> tags:

<head runat="server">
  <script>

    // server-side variant JS with ASP.NET <%= tags %>

  </script>
</head>

More about this topic here: Understanding the runat server attribute

edited May 23 '17 at 11:57

Community

1
1

answered Jul 30 '14 at 10:48

pid

11,472
6
34
63

I'm getting this error on Debug....The name 'UpdateButton' does not exist in the current context.... It's obvious that the script can't find the button, maybe cause it's inside a FormView? – Gloria Jul 30 '14 at 11:07
Ah, ok, yes. Nesting controls causes these problems. Use: `FormView1.FindControl("UpdateButton").ClientID`. – pid Jul 30 '14 at 11:11
Thank you all....Now it works. Is there any drawback for this function, especially on mobiles? Never tested it before. – Gloria Jul 30 '14 at 11:19
I don't think there are any drawbacks, you're golden :) – pid Jul 30 '14 at 11:57

Enable click button when a radio button is selected

2 Answers2