How can I disable a column in a input table?

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

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.

Hello 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


...

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!

@cpayne0, 

Your question has been moved to a different thread, it can be found here: https://www.jotform.com/answers/1129670