Creating Conditions Based off of Checkboxes

  • lreid13
    Asked on February 25, 2021 at 12:07 AM

    Hello,

    I'd like to create conditions for the following. If you could provide me step by step instructions that would be helpful.

    Employment Termination / Questionnaire

    1. Have you done...IF "Checked timesheet..." is not checked I'd like to have the below message (You cannot finish..) show up and the user not be able to complete the form
    2. The checkbox border to be red
    3. Have you done...IF "Final Mileage..." is not checked I'd like to have the below message (You cannot finish...) show up and the user not be able to complete the form
    4. The checkbox border to be red
    5. If both are not checked same as above
    6. The "You cannot finish..." message ONLY display when either or both of the above are not checked
    7. If the message above shows up, I'd like them to not be able to complete the form and have a close form option.

    I hope this makes sense.

  • Mike_G JotForm Support
    Replied on February 25, 2021 at 5:29 AM

    We will be glad to help you with your concern. Please allow me some time to work on a solution to meet your requirements. I'll get back to you on this ticket as soon as possible.

  • Mike_G JotForm Support
    Replied on February 25, 2021 at 5:55 AM

    I have created a form that will show the "You cannot finish.." finish message if neither of the following options is selected when the "Have you done" field is filled.

    • Checked Timesheet for Errors
    • Final Mileage Report Completed and Sent to Lloyd

    Here's the link to a cloned version of your form: https://form.jotform.com/210551966328964

    I have added an additional field that is used to check the selected option, which can be hidden later.

    1614250272 603781209f451 zt210225 054856 Screenshot 10

    The conditions I have added to that form will also hide the submit button.

    1614250246 60378106cfd59 zt210225 054927 Screenshot 21

    I have also updated this condition so the Page Break will also be hidden.

    1614250339 60378163ae133 zt210225 055209 Screenshot 32

    1614250351 6037816fd418e zt210225 055155 Screenshot 43

    However, as for changing the color of the checkbox based on conditions, I have checked and I have not found any available workaround or solution for that. How would you like to consider changing the color of the option's label to the correct color if the option is checked. This means that, by default, the option's label is red, then when the option is selected it will change to black?

    We will wait for your response.

  • lreid13
    Replied on February 25, 2021 at 11:46 AM

    Thank you. I've been able to re-create those conditions.

    As for the color coding, I have been trying to do the CSS coding for those check boxes, however; every time I go into Designer Mode it removes my Form Background and turns it to a solid. I can do the method you suggested, if you could tell me how to do that I can. If I have to go into the CSS I am concerned because of the above mentioned.

  • Mike
    Replied on February 25, 2021 at 6:39 PM

    You may add the next CSS using regular Form Designer to change the label color from red to black when the option is checked:

    #label_input_27_0,
    #label_input_27_2 {
     color: red;
    }

    #input_27_0:checked + label,
    #input_27_2:checked + label {
     color: black;
    }

    95v3k Screenshot 10