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

  • Profile Image
    STJJV
    Asked on September 05, 2017 at 09:41 PM

    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

  • Profile Image
    Jim_R
    Answered on September 05, 2017 at 11:37 PM

    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 

  • Profile Image
    STJJV
    Answered on September 06, 2017 at 12:15 AM

    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.

  • Profile Image
    STJJV
    Answered on September 06, 2017 at 12:33 AM

    same thing happened I must be doing something wrong.

  • Profile Image
    Jim_R
    Answered on September 06, 2017 at 01:59 AM

    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.