我正在 WordPress 上使用强大的插件来生成表单提交。 将有多个复选框和数字字段，就像 https://www.mql5.com/en/market/new_product/mt4 上一样.
在该网站上 - 在“价格”字段下 - 默认情况下会选中复选框字段的值:“免费”。 当用户取消选中该复选框时，下面将显示另一个复选框。
那么如何在wordpress上使用formidable来实现这个目的呢？
顺便说一句，下面是上面链接的 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
- 选中第一个复选框后，其他选项将被禁用(默认)
*更新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
三个步骤:
// 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.
最佳答案
@pije 如果您使用 Formidable，那么您需要使用条件字段。这将允许您根据之前选择/检查的字段触发更多字段的显示/隐藏:他们的文档对此非常可靠:https://formidableforms.com/knowledgebase/using-conditional-logic/
关于jquery - Wordpress 上的复选框和数字字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56914632/