2 radio button, first selection exclude value in the second radio

Hi,

I have 2 radio buttons, both identical, with 3 options. I want to do something like this:

User select 1 option in the first radio button and automatically in the second radio button, the same option is disabled or hidden.

Esample:
Radio 1:
- option A
- option B
- option C

Radio 2:
- option A
- option B
- option C

User select "option B" in radio button 1 then in the radio button 2 the "option B" is disabled or hidden

Is that possible? If yes, how could I do it?

Thanks in advance.

Hi deltafidesign,

You can certainly do this with custom JQuery/Javascript.

Out of curiosity - why do you need to do it?

Bob

Hi Bob,

I want to do that for a form where user can choose first a gift, then, during the process, if he subscribe to the newsletter he can choose another gift, but in this case I want to disable the gift option that he choose before.

How could I do that with JQuery/Javascript?

Would you help me with the code, please?

Thanks

Hi deltafidesign,

This seems to work

jQuery(document).ready(function(jQ) {
  jQ('input[name=radio1]').on('click', function(el) {
    var chosen = jQ(el.currentTarget);
    chosen = chosen.prop('id');
    chosen = chosen.replace('radio1', 'radio2');
    jQ('input[name=radio2]').each( function() {
      jQ(this).prop('disabled', false);
    });
    jQ('#'+chosen).prop('disabled', true);
  });
});

Both radio button groups need to have their names and ids the same - in this case radio1 and radio 2 and you need to replace those names throughout the script if yours are different.

Bob

Thanks Bob, this worked fine.

Now I would also set a class for the opnion already choosen, so that I can display it like not available. Could you suggest me the JQuery code please?

Any idea?

Hi deltafidesign,

Once it's disabled then it should be un-clickable? I guess that you can set a CSS selector using :disabled (see here).

Bob

Yes, it's un-clickable but I can't apply the CSS style.

<div id="fitem8" class="gcore-radio-item">
<input type="radio" data-tooltip="" data-load-state="hidden_parent" style="" title="mytitle" value="First option" id="vantagginewsletter" name="vantagginewsletter" disabled="">
<label for="vantagginewsletter" class="gcore-label">First option</label>
</div>

That's the code but if I apply:

input[type="radio"]:disabled {
background: #dddddd !important;
}

nothing change. Any idea?

Hi deltafidesign,

Sorry, no - no better idea, Radio Button Styling is sometimes done by the browser and/or the template. You'll need to debug to see exactly what is setting the style - and I'm not sure that radio buttons have a background. It might be possible to change the label colour?

Bob

For two radio boxes it works fine, but how do I for three radio boxes?

Hi miribar,

You'd need to extend the code to include the third group - it could get a bit complicated depending on exactly what you need to do.

Bob

I want the following:

1. Choice
option 1
option 2
option 3
option 4
option 5
option 6

2. Choice
option 1
option 2
option 3
option 4
option 5
option 6

3. Choice
option 1
option 2
option 3
option 4
option 5
option 6

in even choice different options must be selected.