Image checkbox widget - limit number of selections

How can I limit the amount of selections for my image checkbox widget. ie 6 images, only allowing 3 to be selected.

Thanks!

I believe that this option is not available for Image Checkboxes widget. We currently have this feature only on regular checkboxes:

You can use the ordinary checkbox, which has this option, and set images onto it with a little bit of custom CSS. I have made a demo of this feature applied onto regular checkboxes, here:

http://form.jotformpro.com/form/51716669616970

What I have done is, I have created a regular checkbox field.

In this checkbox field, I have looked at its Properties and noted its field number (112), and set the maximum allowed selections to 3.

Then, I've used the number (112) to create my own custom CSS, and I have injected CSS into the form:

#cid_112 .form-checkbox-item label {
  width: 195px !important;
  height: 195px !important;
}

#cid_112 .form-checkbox-item {
  clear: none !important;
  width: 225px;
}

#cid_112 .form-checkbox-item:nth-of-type(1) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-01_zpsbd814ac8.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(2) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-02_zpsdf65eca5.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(3) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-03_zps65280e76.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(4) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-04_zpsc4d78940.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(5) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-05_zps0d03a602.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(6) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06_zpsa107f7e5.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(7) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-07_zps94418628.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(8) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-None_zpsb6cd0094.jpg") no-repeat center !important;
}

Please let us know if this workaround would satisfy your needs. Thank you.

Hi Boris,

Thank you for the workaround. This will work :). I have some additional questions and stylings for this workaround. Is it possible to hide the numbers and selector circles (see attached image). And use a roll over (additional uploaded image - like I am using in my image radio widgets) to show a checked image?

And is it possible to center the whole widget?

Thanks!

Yes, we can do all of that.

To remove the label, you would use (note that 112 is the same number we have found out before; it may be different in your own form):

#label_112 { display: none }

To remove the 1, 2, 3 numbers, we would add font-size:0; to the label styling from before:

#cid_112 .form-checkbox-item label {
  width: 195px !important;
  height: 195px !important;
  font-size:0;
}

To remove the small circles with check-marks, we would add the following:

#cid_112 label:before, #cid_112 label:after {
  content: none !important;
}

And to add a special image when the box is checked, we would use input:checked + label in the selectors:

#cid_112 .form-checkbox-item:nth-of-type(1) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-01-Selected_zpse33eb1ac.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(2) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-02-Selected_zps4a571f18.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(3) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-03-Selected_zps4c2740c2.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(4) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-04-Selected_zpse112c30a.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(5) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06-Selected_zpsec233883.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(6) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06-Selected_zps039a175a.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(7) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-07-Selected_zps879a92cf.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(8) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-None-Selected_zpsa56f6222.jpg") no-repeat center !important;
}

Here is a demo form, which I think you will like: http://form.jotformpro.com/form/51716742319962 (you can also clone it to take a closer look)

Here is the full custom CSS used in this form, note that 112 may have to be replaced to match your own element:

#cid_112 .form-checkbox-item label {
  width: 195px !important;
  height: 195px !important;
  font-size:0;
}

#cid_112 .form-checkbox-item {
  clear: none !important;
  width: 225px;
}

#cid_112 .form-checkbox-item:nth-of-type(1) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-01_zpsbd814ac8.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(2) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-02_zpsdf65eca5.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(3) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-03_zps65280e76.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(4) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-04_zpsc4d78940.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(5) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-05_zps0d03a602.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(6) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06_zpsa107f7e5.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(7) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-07_zps94418628.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(8) label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-None_zpsb6cd0094.jpg") no-repeat center !important;
}

#label_112 { display: none }

#cid_112 label:before, #cid_112 label:after {
  content: none !important;
}

#cid_112 .form-checkbox-item:nth-of-type(1) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-01-Selected_zpse33eb1ac.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(2) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-02-Selected_zps4a571f18.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(3) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-03-Selected_zps4c2740c2.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(4) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-04-Selected_zpse112c30a.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(5) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06-Selected_zpsec233883.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(6) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06-Selected_zps039a175a.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(7) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-07-Selected_zps879a92cf.jpg") no-repeat center !important;
}

#cid_112 .form-checkbox-item:nth-of-type(8) input:checked + label {
  background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-None-Selected_zpsa56f6222.jpg") no-repeat center !important;
}

Boris,

You rock! This is working perfectly for me. One last question, can you help me with the .css needed to center everything (screenshot below)?

Thank you for your kind words. As all my colleagues, I simply try to do my best to help out our users.

When it comes to centering these images, this can be done as well by using that number in our selector:

#cid_112 { margin: 0 auto; }

Before image:

After image:

I can see that the checkbox images are still a tiny bit to the left of the center, while their container (#cid_112) is centered. This is because the container is a few pixels wider than the three images, and the images have a float:left on them - which means that they try to go to the left within their container.

If you would like to move these labels to the right a little bit, so that they appear visually in the center, you may want to try using this as well:

#cid_112 label { float: right !important; }

By the way, I think that this is a very beautiful form that you have created. :)

Please let us know if you need further assistance, or kindly open a new thread for any other issues you may have with your forms. As always, we are happy to help.

Thanks for the help Boris, works great!