How can I disable a column in a input table?

  • Profile Image
    mayapfister
    Asked on April 03, 2017 at 08: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

  • Profile Image
    Sven
    Answered on April 03, 2017 at 09: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.



  • Profile Image
    mayapfister
    Answered on April 03, 2017 at 10:45 AM
    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


    ...
  • Profile Image
    Nik_C
    Answered on April 03, 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!

  • Profile Image
    cpayne0
    Answered on April 26, 2017 at 04:50 PM

    Is there a way to block specific rows in specific columns? 
  • Profile Image
    Kevin_G
    Answered on April 26, 2017 at 06:16 PM

    @cpayne0, 

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