Флажки и числовые поля в Wordpress

Я использую грозный плагин на wordpress, который генерирует отправку формы. Там будет несколько флажков и числовых полей, как и в https://www.mql5.com/ru/market/new_product/mt4.

На этом сайте - в поле "Цена" - по умолчанию поле флажка стоит на значении: "Бесплатно". Когда пользователь снимает отметку с этого, ниже будут показаны другие флажки.

Итак, как достичь этой цели, используя грозный на WordPress?

Кстати, ниже приведен html-код по этой ссылке выше:

<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>

И это фрагмент javascript из этой ссылки выше:

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";
        }
    }
}

* Обновление 1

1. Если установлен первый флажок, другие параметры будут отключены (по умолчанию)

2. Первый флажок при снятии флажка, а затем другие параметры будут включены, чтобы установить или снять флажок, а также могут заполнить числовые поля.

3. Другие варианты, когда один или несколько флажков сняты, также могут заполнять числовые поля.

* Обновление 2

Вот полный исходный код с оригинального сайта: gist.github.com/pije76/6cb0a03d705b56f145cd0014da480f73.

* Обновление 3

Вот измененный код из ответа Салли:

(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);

*Обновление 4

3 шага:

// 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.