Search jQuery

jQuery Forum

Enable button after all radio button lists have a selection

in Using jQuery • 4 years ago

Hello,

I'm new to jquery and I'm not sure how to approach this issue i'm having. I have a web page that has 2 radio button lists on the main page and 4 more radio button lists on a modal popup when a user checks a checkbox the popup appears. On the initial page loads the save button on the popup needs to be disabled. I need to use jquery to enable the save button only when all 4 radio button lists have a selection. If the clear button on the popup is clicked the radio button lists on the popup have the selection cleared and the save button needs to be disabled again.

Here is the HTML:

<table>
<tr>
<td>
<asp:RadioButtonList ID="rbList1" data-req="1" runat="server" RepeatDirection="Vertical" TextAlign="right" >
<asp:ListItem Value="BB" Text="Baseball" />
<asp:ListItem Value="FB" Text="Football" />
</asp:RadioButtonList>
</td>
<td>
<asp:RadioButtonList ID="rbList2" runat="server" TextAlign="right" RepeatDirection="Vertical" RepeatLayout="Table">
<asp:ListItem Value="1" Text="1st" />
<asp:ListItem Value="2" Text="2nd" />
<asp:ListItem Value="3" Text="3rd" />
<asp:ListItem Value="4" Text="4th" />
</asp:RadioButtonList>
</td>
<td>
<asp:RadioButtonList ID="rbList3" runat="server" RepeatDirection="Vertical" TextAlign="right">
<asp:ListItem Value="C" Text="Coach" />
<asp:ListItem Value="GM" Text="General Manager" />
</asp:RadioButtonList>
</td>
<td>
<asp:RadioButtonList ID="rbList4" runat="server" RepeatDirection="Vertical" TextAlign="right" >
<asp:ListItem Value="H" Text="Home" />
<asp:ListItem Value="A" Text="Away" />
</asp:RadioButtonList>
</td>
</tr>
<tr><td> </td></tr>
<tr><td><button type="button" onclick="ClearSel('')">Clear</button></td></tr>
<tr><td><button id="btnSave" type="button" data-dismiss="modal">Save</button></td></tr>
</table>

This is the jquery I have so far. It just disables the save button.

<script type="text/javascript">
$(document).ready(function () {
var button = $('#btnSave').prop('disabled', true);
});
</script>

Any help pointing me in the right direction would be very appreciated.

Replies(17)

watusiware

Re: Enable button after all radio button lists have a selection

4 years ago

Please don't post ASP, as few if any here use ASP, and we can't guess in any case what HTML your ASP makes.

In the future, please make a jsFiddle that we can try and then we can show you proposed changes. You can use your browser's "view source' to capture the HTML that your ASP creates.

It would be easier if you apply a common CSS class name to all of the radio button groups.

watusiware

Re: Enable button after all radio button lists have a selection

4 years ago

I updated my response of couple of times.

I am GUESSING at your HTML! I decided not to try to write Javascript for HTML that I am guessing at.

For better answers, post HTML, not ASP, and make a jsFiddle.

Jerry1111..

Re: Enable button after all radio button lists have a selection

4 years ago

Thank you watusiware. I apologize for posting the asp.

Here is my jsFiddle: https://jsfiddle.net/jerry8989/kmh7wdn4/39/

This has 4 radio button lists where the first 3 are required and have the same class name. The 4th is optional and has it's own class name.

save button is disabled on load and the clear button clears the 4 selections.

What I need to figure out is how to check when a radio button is selected if the other required ones are selected so the save button can be enabled when all 3 are selected. If the user clicks "Clear" the radio buttons will all clear and the save button will be disabled again.

Thank you for your help.

jakecigar

Re: Enable button after all radio button lists have a selection

4 years ago

See https://jsfiddle.net/jakecigar/c0L9yprx/1/ <--

I discarded all your native javaScript for some very short jQuery code.

The submit button would be much easier if it was inside a <form> and you coded the radios with the required attribute. Can you make those changes on your page?

JΛ̊KE

Jerry1111..

Re: Enable button after all radio button lists have a selection

4 years ago

Hi Jake,

Thank you so much for cleaning up the JavaScript.

I made the changes you requested.

https://jsfiddle.net/jerry8989/kmh7wdn4/72/

I only put the required on the first option for each radio button. Is this OK?

Thank you

jakecigar

Re: Enable button after all radio button lists have a selection

4 years ago

https://jsfiddle.net/jakecigar/kmh7wdn4/76/ has NO javaScript at all. Notice that it works nicely.

https://jsfiddle.net/jakecigar/kmh7wdn4/81/ does what you want with a tiny bit of jQuery.

JΛ̊KE

jakecigar

Re: Re: Enable button after all radio button lists have a selection

4 years ago

PS I changed the HTML the submit is type submit, and the reset is type reset.

JΛ̊KE

Jerry1111..

Re: Enable button after all radio button lists have a selection

4 years ago

Hi Jake,

Sorry I miss spoke. I did mean jquery not javascript. I appreciate you doing that and making it much cleaner.

The example you gave me does work with enabling the save button when the 3 radio buttons are selected, but when I click the clear button the save button doesn't disable it still stays enabled. I know the required message appears, which makes me think should I leave the save button enabled the entire time and have the required message appear.

What do you think would be the best approach?

jakecigar

Re: Enable button after all radio button lists have a selection

4 years ago

https://jsfiddle.net/jakecigar/kmh7wdn4/83/ disables the submit when the form is reset.

I think enabling and disabling buttons is disconcerting. But people do it all over the Internet and in apps. And I do it sometimes.

I would use the version with no javaScript or the last version that fixes the bug you noticed.

You could use CSS to dim the submit when the required radios are not set, but it would still be clickable.

JΛ̊KE

jakecigar

Re: Enable button after all radio button lists have a selection

4 years ago

https://jsfiddle.net/jakecigar/kmh7wdn4/86/ is the no javaScript version with added CSS to dim the submit button when the form is "invalid"

JΛ̊KE

jakecigar

Re: Re: Enable button after all radio button lists have a selection

4 years ago

I would use that last one. If you aren’t using jQuery for anything else, you would not have to include it!

JΛ̊KE

Jerry1111..

Re: Enable button after all radio button lists have a selection

4 years ago

Thank you so much for all of your help Jake. I really do appreciate it.

I'm using the version with no JavaScript. I'm going to try and use JQuery as much as possible so I can learn it better. I will go over the code you supplied so I can understand it better.

Thank again.

Jerry

jakecigar

Re: Re: Enable button after all radio button lists have a selection

4 years ago

A few years ago, it was considered a great skill to know how to use jQuery. These days, it is more important to know how to do things without jQuery.

jQuery is still a great library, and can get code written faster. There is always a time to use jQuery and a time to use CSS. I think this is a time for CSS.

JΛ̊KE

Jerry1111..

Re: Enable button after all radio button lists have a selection

4 years ago

Should I try and accomplish this task with CSS? Is there browser limitations with that approach?

I would rather start working with CSS if that is the better approach. I will have to look for a beginners tutorial on it.

jakecigar

Re: Enable button after all radio button lists have a selection

4 years ago

I did the task with CSS.

Some of the cool CSS features don’t work with ancient browsers (IE). But most do.

Depending on your audience’s browsers, you can go CSS all the way, or back off on the cool stuff and use jQuery to do cool things.

A good web dev knows HTML and CSS fully. That includes the pseudo selectors.

A very good dev can add jQuery or javaScript.

A great dev knows when to use each of the different technologies.

I started on the web when it was young. When javaScript was almost a joke, and CSS hadn’t been invented yet. I’ve seen the world change several times!

JΛ̊KE

Jerry1111..

Re: Enable button after all radio button lists have a selection

4 years ago

Thank you so much for all your help. I really do appreciate you pointing me in the right direction. I do appreciate it.

I'm using more modern browsers. We are using HTML5 and CSS3 on certain parts of the site so our users have to use browsers that support them.

jakecigar

Re: Re: Enable button after all radio button lists have a selection

4 years ago

I am happy you are in the same place as I am!

I spend my programming time writing custom HTML tags. Like <hierarchical-selects …> , where the javaScript adds the HTML, CSS and javaScript to do a small task well. All native javaScript (ES6) code.

I rarely use jQuery anymore. But, I am still the administrator of this site.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Enable button after all radio button lists have a selection

Replies(17)

Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Enable button after all radio button lists have a selection

Re: Re: Enable button after all radio button lists have a selection

Statistics

Tags

Actions