What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Making a checkbox uncheckable?

    Asked by mypnaa on October 09, 2012 at 09:10 PM

    I have a form that has a limited time offer. Once the registration is due, they can still register but there will be a "late charge fee" of $50. So I included a paypal form that has a 'late charge' checkbox that is automatically checked. I tried making it pre-checked and 'read only' but when I tested it, still it can be unchecked. I also tried to disable and combo with read only but it doesn't reflect on the paypal page. Is there a quick fix for this? Any idea? I appreciate any help from you as soon as possible.

    Here's the code:

    <span class="form-product-item"><input class="form-checkbox validate[required]" type="checkbox" id="input_12_1020" name="q12_pleaseClick[][id]" value="1020" checked="checked" disabled="disabled" />
                <label for="input_12_1020">
                  Late Charge Fee<span class="form-product-details"><b>
                      $<span id="">50.00</span> USD
                   

  • Profile Image
    JotForm Support

    Answered by liyam on October 09, 2012 at 09:32 PM

    Hello, mypnaa.  the readonly state does not affect checkboxes, while setting it as disabled will mean that it will not post the data when submitted.

    If you have placed the HTML source code on your web page, you can probably add this script:

    In between the <head> and </head> tags, you can add this code:

    <script type="text/javascript">
    function CheckboxReadOnly() {
       return false;
    }
    </script>

    While on your checkbox, insert this:

    <input class="form-checkbox validate[required]" type="checkbox" id="input_12_1020" name="q12_pleaseClick[][id]" value="1020" checked="checked" onClick="return CheckboxReadOnly()" />

    This way, the checkbox will not be editable and will stay as checked.

    Please let us know if you need further assistance.

  • Profile Image

    Answered by mypnaa on October 09, 2012 at 10:40 PM

    Thank you! it works like a charm!

    Just one thing I noticed, when I attempt to uncheck the late charge fee checkbox the Total amount toggles/subtracts the $50 charge (but still remains checked no matter how many times I click it which is very good), so no problem when I proceed to the paypal page, the charge still proceeds on top of their checked fields.

    The problem is, its just confusing to the customers when they thought the charge can be lifted once they click the late charge fee and on the start of the form the total shows $0 initially which was supposed to start at $50 since the late charge fee is checked already. Is there a work around with this?

    Thank you so much for your help.

    Edit: I modified the inital amount to $50 but eventhough they cannot uncheck the late charge fee checkbox, once they click it, still it returns to $0.

    Tested working on Firefox but not in IE.

  • Profile Image
    JotForm Support

    Answered by idarktech on October 10, 2012 at 02:01 AM

    @mypnaa,

    How about adding some invisible box to block the said "product" so it can't be clicked? To do that simply add this div code below the total code.

    <div style="height: 30px;width: 300px;z-index: 222;position: absolute;top: 875px;"></div>

    Check this screen to learn where to add this code:

    It should function like this: http://idarktech.com/test/block_product.html

    Let us know if you have further quesitons regarding this. Thanks!

  • Profile Image

    Answered by mypnaa on October 10, 2012 at 02:17 AM

    Thank you but I think its not working on all browsers or resolutions, I tried it using firefox and IE and it is still clickable.

  • Profile Image

    Answered by mypnaa on October 10, 2012 at 02:45 AM

    I was able to solve it by making it 'prechecked' and 'disabled' and created the same checkbox but checked and hidden.

    <span class="form-product-item"><input class="form-checkbox validate[required]" type="checkbox" id="input_12_1021" name="q12_pleaseClick[][id]" value="1021" checked="checked" disabled="disabled"/><input class="form-checkbox validate[required]" type="hidden" id="input_12_1021" name="q12_pleaseClick[][id]" value="1021" checked="checked" />
                <label for="input_12_1021">
                  Late Charge Fee<span class="form-product-details"><b>
                      $<span id="">50.00</span>

  • Profile Image
    JotForm Support

    Answered by idarktech on October 10, 2012 at 03:32 AM

    @mypnaa,

    Sorry about that. I used Chrome and forgot to test it with other browsers. I was about to suggest something for a fix but I think you've figured out a clever solution.

    Cheers!

  • Profile Image

    Answered by mypnaa on October 10, 2012 at 04:52 AM

    Thanks for spending some time with this issue, your fix is also brilliant, I will consider your fix if theres still something wrong with mine. Off topic: Your avatar looks like an Asian, are you a Filipino too? :-)

  • Profile Image
    JotForm Support

    Answered by liyam on October 10, 2012 at 09:54 AM

    You're very much welcome, mypnaa.  If in case you decide to use idarktech's solution and you have difficulty implementing it, just let us know.  We'll be more than happy to assist.  And for your off-topic, yes, he's a Filipino :)