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

  • Profile Image
    xe7en
    Asked on February 20, 2017 at 04:20 AM

    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! :)

  • Profile Image
    BJoanna
    Answered on February 20, 2017 at 04:39 AM

    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. 

     

  • Profile Image
    xe7en
    Answered on February 20, 2017 at 05:00 AM

    Thank you so much it works fine!

     

    Have a nice week. :)

  • Profile Image
    xe7en
    Answered on February 21, 2017 at 02:59 AM

    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

    requirement is   

     

  • Profile Image
    Nik_C
    Answered on February 21, 2017 at 04:39 AM

    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!

  • Profile Image
    xe7en
    Answered on February 21, 2017 at 04:43 AM

    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

  • Profile Image
    Nik_C
    Answered on February 21, 2017 at 05:16 AM

    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.

     

  • Profile Image
    xe7en
    Answered on February 21, 2017 at 05:50 AM

    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: 

  • Profile Image
    Nik_C
    Answered on February 21, 2017 at 08:04 AM

    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!

  • Profile Image
    xe7en
    Answered on February 21, 2017 at 10:49 AM

    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?! : 

     

  • Profile Image
    Nik_C
    Answered on February 21, 2017 at 12:15 PM

    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!

  • Profile Image
    xe7en
    Answered on February 22, 2017 at 08:59 AM

    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

  • Profile Image
    Nik_C
    Answered on February 22, 2017 at 11:55 AM

    Hello Chor,

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

    Thank you for your patience.

  • Profile Image
    Nik_C
    Answered on February 23, 2017 at 04:56 AM

    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!

  • Profile Image
    xe7en
    Answered on February 23, 2017 at 05:09 AM

    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?

  • Profile Image
    Nik_C
    Answered on February 23, 2017 at 06:36 AM

    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!

  • Profile Image
    xe7en
    Answered on February 23, 2017 at 09:31 AM

    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?

     

     

  • Profile Image
    Nik_C
    Answered on February 23, 2017 at 06:03 PM

    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.

  • Profile Image
    xe7en
    Answered on February 24, 2017 at 04:29 AM

    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

  • Profile Image
    BJoanna
    Answered on February 24, 2017 at 06:45 AM

    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.