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?');" />
2 answers
solution1
1 2014-07-30 10:46:48
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.
solution2
1 ACCPTED 2014-07-30 10:48:44
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.