Я использую грозный плагин на 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
* Update3
Вот модифицированный код из ответа Салли:
(function($)
{
$('input[type="number"]').prop('disabled', true);
$(':checkbox#field_gratis-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_gratis-0').prop("checked", false);
});
})(jQuery);