mjunes

Hello,

Sorry, this did work.

$('.my-button').prop('disabled', true);

Hello,

I’ve found a workaround. I used regular checkbox (I hope there isn’t much difference between this and acceptance box) and wrote the below code in the button onclick event to just display an alert. It’s not perfect but does the job.

if($('input[type="checkbox"]').is(":checked")){
               //code
            }
 else if($('input[type="checkbox"]').is(":not(:checked)")){
                //code
            }

I have one more doubt, does the acceptance check box store the consent somewhere? If not, isn’t it the same as a regular checkbox?

Thanks for the help so far Much appreciated.

Hello again,

The code didn’t work. The button is still clickable if the checkbox is unchecked. I’m using an animated button from the CP Blocks plugin. Would that be the issue?

This is the code I have inside the HTML field (CP Block):

<button name="submit btn" type="button" id="foo" class="btn20170714174252 calculate-button" onclick="">Submit</button>
<style>
    @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);

    .btn20170714174252 {
        background-color: #000000 !important;
        border: none !important;
        color: #ffffff !important;
        cursor: pointer !important;
        display: inline-block !important;
        font-family: "Rajdhani", "Roboto", "Arial", sans-serif !important;
        width: 100%;
        font-size: 1em !important;
        font-size: 22px !important;
        line-height: 1em !important;
        outline: none !important;
        padding: 12px 40px 10px !important;
        position: relative !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
    }

    .btn20170714174252:before,
    .btn20170714174252:after {
        border-color: transparent !important;
        -webkit-transition: all 0.25s !important;
        transition: all 0.25s !important;
        border-style: solid !important;
        border-width: 0 !important;
        content: "" !important;
        height: 24px !important;
        position: absolute !important;
        width: 24px !important;
    }

    .btn20170714174252:before {
        border-color: #0f95e2 !important;
        border-right-width: 2px !important;
        border-top-width: 2px !important;
        right: -5px !important;
        top: -5px !important;
    }

    .btn20170714174252:after {
        border-bottom-width: 2px !important;
        border-color: #0f95e2 !important;
        border-left-width: 2px !important;
        bottom: -5px !important;
        left: -5px !important;
    }

    .btn20170714174252:hover,
    .btn20170714174252.hover {
        background-color: #0f95e2 !important;
    }

    .btn20170714174252:hover:before,
    .btn20170714174252.hover:before,
    .btn20170714174252:hover:after,
    .btn20170714174252.hover:after {
        height: 100% !important;
        width: 100% !important;
    }
</style>
<script>
    fbuilderjQuery(document).on('click', '#fbuilder button.calculate-button.btn20170714174252', function() {
        var $ = fbuilderjQuery,
            f = $(this).closest('form'),
            i, j, s, t;
        if (f.length) {
            i = f.attr('id');
            if ((s = i.match(/_\d+$/)) != null && (t = $.fbuilder['forms'][s]) != null) {
                t = t.getItems();
                $.fbuilder['calculator'].defaultCalc('#' + i);
                for (j in t)
                    if (t[j].ftype == 'fsummary') t[j].update();
            }
        }
    });
    
</script>

Thanks.

Hello Codepeople,

Thank you very much for the code. But this totally hides the button if the checkbox isn’t checked. Is there a way to just grey out the button making it unclickable until the checkbox is checked?

Thank you.