How to make one checkbox required and other two not required?

It is also possible to create a selected field which cannot be deselected?

My wish is:

i have 3 selectional fields and i want one of them is selected forever. User cannot deselect this option but they can select the other two option additionaly.

Thanks for reply! :)

This is possible to achieve with CSS, by using pointer-events:none; rule. You can apply this rule to checkbox option that you do not want that your users can deselect. 

Here is my demo form: https://form.jotform.com/70501991476965 

First option can not be deselected.

I added this CSS code to my form: 

#input_5_0 {

    pointer-events : none!important;

}

label#label_input_5_0 {

pointer-events:none!important;

}

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

How to find field IDs and names

You can provide us ID of your form and tell us which option you want to disable and we will provide you CSS code for your form.

Let us know if you need further assistance. 

Thank you so much it works fine!

Have a nice week. :)

Hi there,

i'm sorry to ask you again, but my boss has another wish/idea.

He wan't 3 Button and one of them is a required button and the other two are optional. 

Our User have to select the required button by themselve - so that the button at first have to be deselected. 

the second requirement is: if the user click the send button without clicking the required button a Error Message has to show. 

Hope you understand my wishes.

Thanks

regards,

Chor

Hello Chor,

You can do that by separating the first checkbox field from the second and third:

I made the first checkbox button as required, so if it is not clicked it will throw an error to the user.

Also, you have to remove the CSS code provided by my colleague earlier in order to make the field clickable.

Here is my clone of your form so feel free to check it: https://form.jotform.com/70511879516966

If you need any assistance please let us know.

Thank you!

Hello Nik,

thank you for the fast answer!

I have also think about this solution, but my problem is that the distance from the first Checkbox is not the same as from the option 2 to option 3. How to solve this problem? 

Best regards,

Chor

Hello Chor,

Rather than making the distance smaller between first and second. I would make the distance between 2nd and 3rd to match the distance between 1st and second. And to do that just paste this CSS in your Custom CSS field:

#label_input_22_0{

  margin-top:-16px;

  margin-bottom:10px;

}

It will look better because of the error message that will be shown if the first button is not checked. I made a new form with all changes and here is the link: https://form.jotform.com/70511998241963

And here is how it looks like:

Could that work for you?

Please let us know.

HI Nik,

I think this solution is the best way to solve our problem - many thanks!

could you please move the second active field a little up? See below: 

Hello xe7en,

You're completely right, my apologies, I overlooked that one :)

Please add the below code to your Custom CSS Code:

label#label_input_22_0::after{

  margin-top:-16px!important;

} 

It should look like this:

Let us know how it worked for you.

Thank you!

Hi,

thank you! It works fine.

Can you tell me how to replace your design instead of mine? I'm not want to clone it because the form is already in use (dont want to lose the submission etc.). Is there any solution?

You also can edit it directly in myform.

The css-designer don't work as good as before JotForm v4 released. It looks like a bug?! : 

I did the changes in your form. It looks fine to me.

Please check and let us know if it is ok now.

Thank you!

Hi Nik,

one last wish, could you please add "responsive" to the form? I know where i can do it but the advance designer dont work, if i try to set it the complete css-design is deleted. I dont know how and why this happens.

thank you again!

regards,

Chor

Hello Chor,

Let me check that and I will get back to you as soon as possible.

Thank you for your patience.

Hello Chor,

Thank you for your patience.

I had a hard time making the form responsive because of Theme used, and field "Anrede". So to make it easier, I replaced that field with regular checkbox field:

And I made it so it is possible to select maximum one:

Again, I had a hard time with regular radio button field because of the theme used, so CSS that I used to align it didn't work.

Hope this could work. 

If it doesn't please let us know so we can try to find some other solution if it is possible.

And it's mobile responsive. You can check my clone of your form: https://form.jotform.com/70511998241963

Thank you!

I'm sorry to say that, but this would not working for me, it looks not good as before.

We have to find a way to get the "Anrede" looks like before. :( Is there no way?

I added the radio button fields again and I was able to make them appear properly. Those changes I saved in your form, so please check and let us know how it worked.

It looks fine on a mobile phone as well.

We'll wait for your response.

Thank you!

Thank you Nik for your efforts.

It is possible to move the Text "Anrede" in the same line as "Frau" and "Herr" is? So that "Anrede" stays left, "frau" in the middle and "Herr" on the right side?

I'm sorry for the delay.

I added this code to your form: 

div#cid_24 {

    margin-left: 50px!important;

    margin-top: -25px!important;

}

label#label_24 {

    margin-left: -10px;

}

And that is the closest I could get because of the responsiveness problem, so that's why your fields need to be aligned like that:

And in mobile view:

Hope this could work for you. 

Please check and let us know your thoughts.

Thank you Nik. 

additional i have added another css codes and changes some codes.

could you can tell me how to center the text in the Box ("Frau" and "Herr") -> before <- checked?

In the "checked"-position the text is already center but not in the "unchecked" version

I have tested your embedded form on this page http://www.humilife.de/tablet/index.html and I was not able to replicate mentioned issue. 

Check box options are center before and after they are selected. 

If you have issues with some other form, please provide us ID of that form.