How can I disable some radio buttons inside the input table field?

in the form I'm working on I have inserted a table with dates across the top and occasion going down. I want to be able to grey out 2 of the button on each line as they are not appropriate for the both occasions.

so the first occasion is Confirmation the dates are the first 2 across the top so I want to grey out the 3rd and 4th

then the second occasion is Eucharist and the dates are the 3rd and 4th across the top  so I want to grey out the 1st and 2nd.

thank you for all the help you provide.

cheers

Cathy

Hey Cathy - So, you wanted to disable the radio buttons highlighted on the image below?

Since there's no way to disable a field using CSS, what you can do is either disable the pointer events for those sections, or hide them altogether.

Choose any of these CSS Code snippets:

(disable pointer events)

#input_67_0_2, #input_67_0_3, #input_67_1_0, #input_67_1_1 {

    pointer-events: none;

}

(hide them)

#input_67_0_2, #input_67_0_3, #input_67_1_0, #input_67_1_1 {

    display: none;

}

Complete guide: How-to-Inject-Custom-CSS-Codes 

thank you I tried to do the first but nothing seems to have happened.  I went to the form designer roller then the CSS tab and pasted the first bit of code, then saved. but all the button are still lit and are able to be used. I'll try the second bit of code now.

same thing happened I must be doing something wrong.

You have some extra characters on your Form Builder's CSS section.

Remove that extra 't3' and that should fix it. Once again, here's what will happen on each of those 2 code snippets:

1. The pointer-events: none; line will render any mouse clicks useless on those 4 sections. Meaning users can't click on them. The 4 radio buttons are there, visually displayed, but they can't click it. 

2. The display: none; line however, will hide them altogether.