-
mayapfisterAsked on April 3, 2017 at 8:05 AM
Hi,
I have an input table with checkboxes in my form. I would like to gray out the columns for the options that are no longer available. E.g. Sat. 29.4. should not be selectable anymore. To remove only the checkbox would also be an option, but I would like to let the date (Title of the row) there, so people don't get confused if a day is missing in the row.
Since there is no possibility to directly edit the HTML, how can I do that?
Thank you very much for your help
Regards,
Maya
-
SvenReplied on April 3, 2017 at 9:13 AM
You can do that by adding the following custom CSS to your form:
.form-matrix-table td:nth-child(3) input{
pointer-events: none;
}
This will set the 2nd column as read only, and it won't be able to select the 2nd checkbox.
I have cloned your form and add the custom CSS, you can view it or clone it and use it, using the following URL:
https://form.jotformpro.com/70924058205958
Form more info on how to inject custom CSS:
How to Inject Custom CSS Codes
If you need help cloning the form to your account, please follow this link:
How to Clone an Existing Form from a URL
Thank you.
-
mayapfisterReplied on April 3, 2017 at 10:45 AMHello Sven,
thank you very much for your tip. unfortunately this does not work on ie11. I just had a look at your clone, and I am able to select the checkbox in the second (and also all others) column. For Firefox it works.
Can I get it working for IE11 too?
Thanks alot
Maya----Ursprüngliche Nachricht----
Von : noreply@jotform.com
Datum : 03/04/2017 - 15:13 (UTC)
An : maya.pfister@bluewin.ch
Betreff : Re: How can I gray-out a column in a input table?
New response received
A new response has been received:
Answered by
Sven
You can do that by adding the following custom
CSS to your form:
.form-matrix-table td:nth-child(3)
input{
pointer-events: none;
}
This will set the 2nd column as read only, and it won't be able to select the
2nd checkbox.
I have cloned your form and add the custom CSS, you can view it or clone it
and use it, using the following URL:
https://form.jotformpro.com/70924058205958
Form more info on how to inject custom CSS:
How
to Inject Custom CSS Codes
If you need help cloning the form to your account, please follow this
link:
How
to Clone an Existing Form from a URL
Thank you.
View this thread on browser »
Unsubscribe Thread
1491225187
... -
Nik_CReplied on April 3, 2017 at 12:35 PM
The CSS code: pointer-events: none is not working in Internet explorer. It is FireFox specific "hack" (works in Chrome as well if I'm not mistaken).
With IE is a bit different, it requires some work, I found this forum: http://stackoverflow.com/questions/10276133/how-to-disable-html-links/10276157#10276157
with a workaround included. Please check and let us know if you have any further questions.
Thank you!
-
cpayne0Replied on April 26, 2017 at 4:50 PM
-
Kevin Support Team LeadReplied on April 26, 2017 at 6:16 PM
@cpayne0,
Your question has been moved to a different thread, it can be found here: https://www.jotform.com/answers/1129670