반응형
Wordpress의 확인란 및 숫자 필드
폼 제출을 생성하는 워드프레스에 가공 가능한 플러그인을 사용하고 있습니다.https://www.mql5.com/en/market/new_product/mt4과 마찬가지로 여러 개의 체크박스와 숫자 필드가 표시됩니다.
해당 사이트의 "가격" 필드 아래에 있는 확인란 필드는 기본적으로 "공짜" 값입니다.사용자가 이 체크박스를 끄면 아래에 다른 체크박스가 표시됩니다.
그렇다면 워드프레스에서 가공할 만한 것을 사용함으로써 어떻게 이 목적을 달성할 수 있을까요?
아래 링크의 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
다음은 Sally의 답변에서 수정된 코드입니다.
(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.
@pije Formable을 사용하는 경우 조건 필드를 사용해야 합니다.그러면 이전에 선택/체크된 필드에 따라 추가 필드의 표시/숨김을 트리거할 수 있습니다.이 점에 대해서는, https://formidableforms.com/knowledgebase/using-conditional-logic/ 의 메뉴얼이 충실합니다.
조건부 필드 지원이 포함된 Formable Forms pro/paid 버전은 없습니다.단, 아직 답변을 받지 못하셨기 때문에 이 "일반적인" jQuery/JavaScript 솔루션을 올렸습니다.도움이 됐으면 좋겠어요
스크립트만 알려드리겠습니다.테마 바닥글에 넣을 수 있습니다.</body>그리고 잊지 말고<script>그리고.</script>(태그) 또는 외부 장치.js파일:
2019년 7월 27일 업데이트: 다음 스니펫에서 스크립트를 찾을 수 있습니다.
단, 현재 사이트에 있는 Harga/Price 섹션의 마크업/HTML에 한정되어 있습니다.그러나 기본적으로 위의 코드를 폼의 유사한 섹션에 대한 참조로 사용할 수 있습니다.여기 작업 데모가 있습니다.
(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="["Gratis"]" 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="["Tanpa batas"]" 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="["Sewa 1 bulan"]" 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="["Sewa 3 bulan"]" 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="["Sewa 6 bulan"]" 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="["Sewa 1 tahun"]" data-invmsg="masa berlaku: is invalid" /> Sewa 1 tahun</label></div>
</div>
</div>언급URL : https://stackoverflow.com/questions/56914632/checkbox-number-fields-on-wordpress
반응형
'programing' 카테고리의 다른 글
| spring-boot에서 명령줄 인수 가져오기: run (0) | 2023.02.28 |
|---|---|
| 중복된 식별자 'LibraryManagedAttributes' (0) | 2023.02.28 |
| OSGi에서 스프링 부트를 사용할 수 있습니까?그렇지 않은 경우 OSGi Spring Boot을 사용할 계획이 있습니까? (0) | 2023.02.28 |
| ES2015 모듈 구문은 커스텀 TypeScript 모듈 및 네임스페이스 @typescript-eslint/no-namespace보다 선호됩니다. (0) | 2023.02.28 |
| Jmeter가 POST 중에 JSON 데이터를 전송하지 않음 (0) | 2023.02.28 |