Question

我正在wordpress上使用强大的插件来生成表单提交。就像https://www.mql5.com/en/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

选中第一个复选框，然后禁用其他选项（默认）

取消选中第一个复选框后，将启用另一个选项来选中或取消选中它们，并且也可以填写数字字段

如果取消选中一个或多个复选框，则另一个选项也可以填充数字字段

* Update2 这是原始网站的完整源代码：gist.github.com/pije76/6cb0a03d705b56f145cd0014da480f73

Answer 1

我没有conditional fields支持所附带的Formidable Forms专业版/付费版；但是我发布了这个“通用” jQuery / JavaScript解决方案，因为您仍然没有接受任何答案..我希望它可以为您提供帮助。

所以我只给您脚本；您可以将其放在主题页脚中（在</body>之前，并且不要忘记<script>和</script>标签）或将其放置在外部.js文件中：

更新2019年7月27日：您可以在以下片段中找到该脚本。

但是，这特定于Harga / Price部分的标记/ HTML，因为它当前位于http://korexindo.com/k-market/form-k-market/上。但您基本上可以将上述代码用作表单中类似部分的参考。这是一个有效的demo：

(function($){
  // Define the selectors/variables; be as specific as possible.
  var gratis = $(':checkbox#field_fm78o-0');
  var price_fields = $('.frm_form_field input[type="number"]');
  var masa_berlakus = $(':checkbox[id^="field_masaberlaku_"]');

  // On page load..
  price_fields.prop('disabled', true);  // disable the price fields
  masa_berlakus.prop('checked', false); // and uncheck the "masa berlaku" fields.

  // On click of the "Gratis" field..
  // Gratis checked: disable the price fields; uncheck the "masa berlaku" fields.
  // Gratis unchecked: enable the price fields; check the "masa berlaku" fields.
  gratis.on('change', function(){
    price_fields.prop('disabled', this.checked);
    masa_berlakus.prop('checked', ! this.checked);
  });

  // On click of each "masa berlaku" field..
  // If checked: enable the price field; uncheck the "Gratis" field.
  // If unchecked: disable the price field.
  masa_berlakus.on('change', function(){
    var cont = $(this).closest('div.frm_form_field')
      .prev('div.frm_form_field');

    cont.find('input[type="number"]')
      .prop('disabled', ! this.checked);

    if (this.checked) {
      gratis.prop('checked', false);
    }
  });
})(jQuery);

<!-- WordPress still uses jQuery v1.12.4 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="frm_field_16_container" class="frm_form_field form-field frm_left_container frm_first frm_third horizontal_radio">
  <div id="field_fm78o_label" class="frm_primary_label">Harga:
    <span class="frm_required"></span>
  </div>
  <div class="frm_opt_container" aria-labelledby="field_fm78o_label" role="group">
    <div class="frm_checkbox" id="frm_checkbox_16-8-0"><label for="field_fm78o-0"><input type="checkbox" name="item_meta[16][]" id="field_fm78o-0" value="Gratis" checked="checked" data-sectionid="8" data-frmval="[&quot;Gratis&quot;]" data-invmsg="Harga: is invalid" /> Gratis</label></div>
  </div>
</div>
<!-- Hidden inputs here -->
<div id="frm_field_18_container" class="frm_form_field form-field frm_left_container frm_first frm_third">
  <label for="field_5ust4" id="field_5ust4_label" class="frm_primary_label">Harga1:
    <span class="frm_required"></span>
  </label>
  <input type="number" id="field_5ust4" name="item_meta[18]" value="" data-sectionid="8" placeholder="Rp. 0,00" data-invmsg="unlimited price is invalid" min="1" max="99999999999" step="1"/>
</div>
<div id="frm_field_19_container" class="frm_form_field form-field frm_left_container frm_third horizontal_radio">
  <div id="field_masaberlaku_1_label" class="frm_primary_label">masa berlaku:
    <span class="frm_required"></span>
  </div>
  <div class="frm_opt_container" aria-labelledby="field_masaberlaku_1_label" role="group">
    <div class="frm_checkbox" id="frm_checkbox_19-8-0"><label for="field_masaberlaku_1-0"><input type="checkbox" name="item_meta[19][]" id="field_masaberlaku_1-0" value="Tanpa batas" checked="checked" data-sectionid="8" data-frmval="[&quot;Tanpa batas&quot;]" data-invmsg="masa berlaku: is invalid" /> Tanpa batas</label></div>
  </div>
</div>
<!-- Hidden inputs here -->
<div id="frm_field_20_container" class="frm_form_field form-field frm_left_container frm_first frm_third">
  <label for="field_5wbs3" id="field_5wbs3_label" class="frm_primary_label">Harga2:
    <span class="frm_required"></span>
  </label>
  <input type="number" id="field_5wbs3" name="item_meta[20]" value="" data-sectionid="8" placeholder="Rp. 0,00" data-invmsg="unlimited price is invalid" min="1" max="99999999999" step="1"/>
</div>
<div id="frm_field_21_container" class="frm_form_field form-field frm_left_container frm_third horizontal_radio">
  <div id="field_masaberlaku_2_label" class="frm_primary_label">masa berlaku:
    <span class="frm_required"></span>
  </div>
  <div class="frm_opt_container" aria-labelledby="field_masaberlaku_2_label" role="group">
    <div class="frm_checkbox" id="frm_checkbox_21-8-0"><label for="field_masaberlaku_2-0"><input type="checkbox" name="item_meta[21][]" id="field_masaberlaku_2-0" value="Sewa 1 bulan" checked="checked" data-sectionid="8" data-frmval="[&quot;Sewa 1 bulan&quot;]" data-invmsg="masa berlaku: is invalid" /> Sewa 1 bulan</label></div>
  </div>
</div>
<div id="frm_field_22_container" class="frm_form_field form-field frm_left_container frm_first frm_third">
  <label for="field_yjuqd" id="field_yjuqd_label" class="frm_primary_label">Harga3:
    <span class="frm_required"></span>
  </label>
  <input type="number" id="field_yjuqd" name="item_meta[22]" value="" data-sectionid="8" placeholder="Rp. 0,00" data-invmsg="unlimited price is invalid" min="1" max="99999999999" step="1"/>
</div>
<div id="frm_field_23_container" class="frm_form_field form-field frm_left_container frm_third horizontal_radio">
  <div id="field_masaberlaku_3_label" class="frm_primary_label">masa berlaku:
    <span class="frm_required"></span>
  </div>
  <div class="frm_opt_container" aria-labelledby="field_masaberlaku_3_label" role="group">
    <div class="frm_checkbox" id="frm_checkbox_23-8-0"><label for="field_masaberlaku_3-0"><input type="checkbox" name="item_meta[23][]" id="field_masaberlaku_3-0" value="Sewa 3 bulan" checked="checked" data-sectionid="8" data-frmval="[&quot;Sewa 3 bulan&quot;]" data-invmsg="masa berlaku: is invalid" /> Sewa 3 bulan</label></div>
  </div>
</div>
<div id="frm_field_24_container" class="frm_form_field form-field frm_left_container frm_first frm_third">
  <label for="field_mjy2z" id="field_mjy2z_label" class="frm_primary_label">Harga4:
    <span class="frm_required"></span>
  </label>
  <input type="number" id="field_mjy2z" name="item_meta[24]" value="" data-sectionid="8" placeholder="Rp. 0,00" data-invmsg="unlimited price is invalid" min="1" max="99999999999" step="1"/>
</div>
<div id="frm_field_25_container" class="frm_form_field form-field frm_left_container frm_third horizontal_radio">
  <div id="field_masaberlaku_4_label" class="frm_primary_label">masa berlaku:
    <span class="frm_required"></span>
  </div>
  <div class="frm_opt_container" aria-labelledby="field_masaberlaku_4_label" role="group">
    <div class="frm_checkbox" id="frm_checkbox_25-8-0"><label for="field_masaberlaku_4-0"><input type="checkbox" name="item_meta[25][]" id="field_masaberlaku_4-0" value="Sewa 6 bulan" checked="checked" data-sectionid="8" data-frmval="[&quot;Sewa 6 bulan&quot;]" data-invmsg="masa berlaku: is invalid" /> Sewa 6 bulan</label></div>
  </div>
</div>
<div id="frm_field_26_container" class="frm_form_field form-field frm_left_container frm_first frm_third">
  <label for="field_c41ii" id="field_c41ii_label" class="frm_primary_label">Harga5:
    <span class="frm_required"></span>
  </label>
  <input type="number" id="field_c41ii" name="item_meta[26]" value="" data-sectionid="8" placeholder="Rp. 0,00" data-invmsg="unlimited price is invalid" min="1" max="99999999999" step="1"/>
</div>
<div id="frm_field_27_container" class="frm_form_field form-field frm_left_container frm_third horizontal_radio">
  <div id="field_masaberlaku_5_label" class="frm_primary_label">masa berlaku:
    <span class="frm_required"></span>
  </div>
  <div class="frm_opt_container" aria-labelledby="field_masaberlaku_5_label" role="group">
    <div class="frm_checkbox" id="frm_checkbox_27-8-0"><label for="field_masaberlaku_5-0"><input type="checkbox" name="item_meta[27][]" id="field_masaberlaku_5-0" value="Sewa 1 tahun" checked="checked" data-sectionid="8" data-frmval="[&quot;Sewa 1 tahun&quot;]" data-invmsg="masa berlaku: is invalid" /> Sewa 1 tahun</label></div>
  </div>
</div>

Answer 2

@pije好吧，如果您使用的是“强大”，则需要使用“条件字段”。这将允许您根据先前选择/选中的字段触发其他字段的显示/隐藏：它们的文档对此非常可靠：https://formidableforms.com/knowledgebase/using-conditional-logic/

强大的复选框和数字字段

2 个答案: