show/hide dropdown menu depending on radio button selection - jquery

Question

I have made a form with 2 radio buttons and 2 drop down menus which works. however i have now added another 2 radio buttons and 2 more drop down menus ( i have not changed the jquery) so it is not working.

i have uploaded it to jsfiddle: http://jsfiddle.net/qbawh/

what do I need to change in the jquery for both radio buttons and dropdowns to work.

what the form should do is: if 'no' is selcted on 1 i want the dropdown to be greyed out. if 'yes' is selected users can select from dropdown. I want both to work independtly.

Answer 1

In html, radio buttons work as a group when they have the same name attribute. So by giving all four of your radio buttons the same name you've set them up as a single group (so clicking any of the four will deselect the previously select one). To fix this simply give the second Yes/No buttons some other name . Given that your select elements have names "colour1" and "colour2" you might like to rename the first Yes/No radios to "discount1" and the second set to "discount2".

Then update your jQuery code to use the new name that you've given to the second group of radios.

Your html in the fiddle is invalid in that you have tr and td elements that don't belong to a table, but in a general sense if you can put the first two radios and their associated select elements inside the same parent container (whether a tr or a div or something) it makes it easier to write simple jQuery code.

For example, if you fix your html to have the radios and their associated selects in the same table row you can then assign a single .click() handler to all the radios (even though they're in different groups) that will enable/disable only the select elements in the same table row by using jQuery to find the ones that belong to the same parent row:

$('input[name^="discount"]').click(function() {
   $(this).closest('tr').find('select').prop('disabled', this.value=='No');
});

This uses the ^= attribute starts with selector to put a .click handler on all inputs with a name starting with "discount". When clicked, it will then find the closet parent tr element and get all the select elements in that row and disable/enable them.

Answer 2

In first place, you must be change the name of the second radio button group, thats all for radio buttons. Now for dropdowns:

$(document).ready(function(){
    $('input[type="radio"]').change(function(){
       if($(this).val()=='No'){
          if($(this).attr('name')=='discount'){
             $('#colour1,#shade1').attr('disabled',true);
          } else{
             $('#colour2,#shade2').attr('disabled',true);
          }
       } else {
          if($(this).attr('name')=='discount'){
             $('#colour1,#shade1').removeAttr('disabled');
          } else{
             $('#colour2,#shade2').removeAttr('disabled');
          }
       }
    });
});

That's work for do not change your HTML. Sorry for my bad english

Answer 3

You should give different names to the radio buttons if you want to group them separately. Accordingly change the code in validate method.

I have fixed your issue in the fiddle take a look.

Demo