Checkbox & Number Fields On Wordpress

Question

I am using formidable plugin on wordpress that generates a form submission. There will be multiple checkboxes & numbers fields just same like on https://www.mql5.com/en/market/new_product/mt4.

On that site - under "Price" field - by default the checkbox field is checked on value: "Free". When user uncheck on that then another checkboxes will be shown on below.

So how to accomplish this purpose by using formidable on wordpress?

Btw below is html code from that link above:

<div class="line" style="padding-bottom: 2px;">
<div class="label">
<label for="Price">Price:</label>
</div>
<div class="field_input">
<input type="checkbox" id="priceFree" name="isFree" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" checked onclick="onPriceCheckChanged(this)" />
<label for="checkFree" style="color: #626363;vertical-align:middle;">Free</label>
</div>
</div>
<div class="line" style="padding-top: 2px;">
<div class="label" style="padding-top: 2px;">

</div>
<div class="field_input">
<div style="margin-bottom:5px;">
    <div class="inputWrapper" style="width:100px;display:inline-block;*display:inline;*zoom:1;*margin-right:5px;line-height:22px;vertical-align:middle;">
        <input data-old="" id="PriceRaw" name="PriceRaw" style="text-align: right; padding-right:2px;" type="text" value="0.00" />
    </div>

    <span id="PriceAdditional" style="color:#626363;display:inline-block;*display:inline;*zoom:1;line-height:22px;vertical-align:middle;">
        USD
        <input type="checkbox" id="checkPrice" name="checkPrice" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" onclick="onPriceCheckChanged(this)" />
        <label for="checkPrice" style="color: #626363;vertical-align:middle;">for unlimited use</label>
    </span>
    <div>
        <script type='text/javascript' id='validate_PriceRaw'>/*<![CDATA[*/ mqGlobal.AddOnReady(function() {V.push(['PriceRaw',10,'Invalid price format. Please enter number',CheckProductPrice]);});mqGlobal.AddOnReady(function() {V.push(['PriceRaw',10,'Invalid price',CheckProductPriceValue]);}); /*]]>*/</script>
    </div>
</div>
<div style="margin-bottom:5px;">
    <div class="inputWrapper" style="width:100px;display:inline-block;*display:inline;*zoom:1;*margin-right:5px;line-height:22px;vertical-align:middle;">
        <input data-old="" id="Price4Raw" name="Price4Raw" style="text-align: right; padding-right:2px;" type="text" value="0.00" />
    </div>

    <span id="Price4Additional" style="color:#626363;display:inline-block;*display:inline;*zoom:1;line-height:22px;vertical-align:middle;">
        USD
        <input type="checkbox" id="checkPrice4" name="checkPrice4" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" onclick="onPriceCheckChanged(this)" />
        <label for="checkPrice4" style="color: #626363;vertical-align:middle;">1 month rent</label>
    </span>
    <div>
        <script type='text/javascript' id='validate_Price4Raw'>/*<![CDATA[*/ mqGlobal.AddOnReady(function() {V.push(['Price4Raw',10,'Invalid price format. Please enter number',CheckProductPrice]);});mqGlobal.AddOnReady(function() {V.push(['Price4Raw',10,'Invalid price',CheckProductSubscribePriceValue]);}); /*]]>*/</script>
    </div>
</div>
<div style="margin-bottom:5px;">
    <div class="inputWrapper" style="width:100px;display:inline-block;*display:inline;*zoom:1;*margin-right:5px;line-height:22px;vertical-align:middle;">
        <input data-old="" id="Price3Raw" name="Price3Raw" style="text-align: right; padding-right:2px;" type="text" value="0.00" />
    </div>

    <span id="Price3Additional" style="color:#626363;display:inline-block;*display:inline;*zoom:1;line-height:22px;vertical-align:middle;">
        USD
        <input type="checkbox" id="checkPrice3" name="checkPrice3" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" onclick="onPriceCheckChanged(this)" />
        <label for="checkPrice3" style="color: #626363;vertical-align:middle;">3 months rent</label>
    </span>
    <div>
        <script type='text/javascript' id='validate_Price3Raw'>/*<![CDATA[*/ mqGlobal.AddOnReady(function() {V.push(['Price3Raw',10,'Invalid price format. Please enter number',CheckProductPrice]);});mqGlobal.AddOnReady(function() {V.push(['Price3Raw',10,'Invalid price',CheckProductSubscribePriceValue]);}); /*]]>*/</script>
    </div>
</div>
<div style="margin-bottom:5px;">
    <div class="inputWrapper" style="width:100px;display:inline-block;*display:inline;*zoom:1;*margin-right:5px;line-height:22px;vertical-align:middle;">
        <input data-old="" id="Price2Raw" name="Price2Raw" style="text-align: right; padding-right:2px;" type="text" value="0.00" />
    </div>

    <span id="Price2Additional" style="color:#626363;display:inline-block;*display:inline;*zoom:1;line-height:22px;vertical-align:middle;">
        USD
        <input type="checkbox" id="checkPrice2" name="checkPrice2" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" onclick="onPriceCheckChanged(this)" />
        <label for="checkPrice2" style="color: #626363;vertical-align:middle;">6 months rent</label>
    </span>
    <div>
        <script type='text/javascript' id='validate_Price2Raw'>/*<![CDATA[*/ mqGlobal.AddOnReady(function() {V.push(['Price2Raw',10,'Invalid price format. Please enter number',CheckProductPrice]);});mqGlobal.AddOnReady(function() {V.push(['Price2Raw',10,'Invalid price',CheckProductSubscribePriceValue]);}); /*]]>*/</script>
    </div>
</div>
<div style="margin-bottom:5px;">
    <div class="inputWrapper" style="width:100px;display:inline-block;*display:inline;*zoom:1;*margin-right:5px;line-height:22px;vertical-align:middle;">
        <input data-old="" id="Price1Raw" name="Price1Raw" style="text-align: right; padding-right:2px;" type="text" value="0.00" />
    </div>

    <span id="Price1Additional" style="color:#626363;display:inline-block;*display:inline;*zoom:1;line-height:22px;vertical-align:middle;">
        USD
        <input type="checkbox" id="checkPrice1" name="checkPrice1" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" onclick="onPriceCheckChanged(this)" />
        <label for="checkPrice1" style="color: #626363;vertical-align:middle;">1 year rent</label>
    </span>
</div>
<div>

And this is javascript snippet from that link above:

function onPriceCheckChanged(priceCheck)
{
    var readonly = !priceCheck;
    var any = readonly || priceCheck.id == "priceFree";
    var checked = readonly || (any ? !priceCheck.checked : priceCheck.checked);
    var anyChecked = false;
    for(var i = 0; i < 5; i++)
    {
        var pc = $("checkPrice" + (i || ""));
        if(any || pc.id == priceCheck.id)
        {
            if(!readonly)
                pc.checked = checked;
            checkPriceCheck(pc);
        }
        if(pc.checked)
            anyChecked = true;
    }
    if(!readonly && priceCheck.id !== "priceFree" && priceCheck.checked)
    {
        $("priceFree").checked = false;
    }
    var actObj = $('MaxActivations');
    var actObjD = $('MaxActivationsDisabled');
    var feeObj = $('AffilationFee');
    if(!anyChecked)
    {
        if(feeObj)
        {
            oldFee = feeObj.value;
            feeObj.value = 0;
            feeObj.disabled = "disabled";
            feeObj.readonly = "readonly";
        }
        if(actObj && actObjD)
        {
            oldAct = actObj.value;
            actObj.value = 10;
            actObj.style.display = "none";
            actObjD.style.display = "inline";
        }
    }
    else
    {
        if(feeObj)
        {
            feeObj.value = oldFee;
            feeObj.disabled = null;
            feeObj.readonly = null;
        }
        if(actObj && actObjD)
        {
            actObj.value = oldAct;
            actObj.style.display = "inline";
            actObjD.style.display = "none";
        }
    }
}

*Update 1

1. The first checkbox when checked then another options will disabled (it's default)

2. The first checkbox when uncheck then another options will be enable to check or uncheck and can fill the number fields too

3. The another options when one or more checkbox is uncheck then it can fill the number fields too

*Update 2

Here's the full source code from original site: gist.github.com/pije76/6cb0a03d705b56f145cd0014da480f73

*Update 3

Here's the modified code from Sally's answer:

(function($)
{
    $('input[type="number"]').prop('disabled', true);
    $(':checkbox#field_fm78o-0').on('click', function()
    {
        $(':checkbox[id^="field_masaberlaku_"]').prop('checked', !this.checked).change();
    });

    $(':checkbox[id^="field_masaberlaku_"]').on('change', function()
    {
        var cont = $(this).closest('div.frm_form_field').prev('div.frm_form_field');
        cont.find('input[type="number"]').prop('disabled', this.disabled || !this.checked);
        $(':checkbox#field_fm78o-0').prop("checked", false);
    });
})(jQuery);

*Update 4

The 3 steps:

// 1. Disable the Price field when the "Gratis" field is checked but keep enable the "masa berlaku" fields so user can check it. (default)
    $('input[type="number"]').prop('disabled', true);

// 2a. When the "Gratis" field is unchecked then checked all the "masa berlaku" fields.
    $(':checkbox#field_fm78o-0').on('click', function()
    {
        $(':checkbox[id^="field_masaberlaku_"]').prop('checked', !this.checked).change();
    });

// 2b. When one or more the "masa berlaku" fields is checked then user can fill the Price field that have relationship with that field and also disable the other Price fields.
    $(':checkbox[id^="field_masaberlaku_"]').on('change', function()
    {
        var cont = $(this).closest('div.frm_form_field').prev('div.frm_form_field');
        cont.find('input[type="number"]').prop('disabled', this.disabled || !this.checked);
        $(':checkbox#field_fm78o-0').prop("checked", false);
    });

// 3. When the "Gratis" field is checked again then go back the behaviour to step 1 again (default). 
// I am stuck on this step when pass the step 1 & 2 then I can not check the Gratis field again and I am not sure how to get this step.

Answer 1

@pije Well if you're using Formidable then you need to employ Conditional Fields. This will allow you to trigger a show/hide of further fields depending on previously selected/checked fields: Their documentation is pretty solid for this: https://formidableforms.com/knowledgebase/using-conditional-logic/