Checkbox & Number Fields On Wordpress
@pije Well if you're using Formidable then you need to employ Conditional Fields. This will allow you to trigger a show/hide of further fields depending on previously selected/checked fields: Their documentation is pretty solid for this: https://formidableforms.com/knowledgebase/using-conditional-logic/
I don't have Formidable Forms pro/paid version which comes with the conditional fields support; but I posted this "generic" jQuery/JavaScript solution since you still have not accepted any answers.. and I hope it helps you.
So I'm giving you just the script; you can put it in the theme footer (before </body> and don't forget the <script> and </script> tags) or place it in an external .js file:
UPDATE Jul 27th 2019: You can find the script in the following snippet.
That is, however, specific to the markup/HTML of the Harga/Price section as it is currently on the site. But you can basically use the above code as a reference for similar sections in the form. And here's a working 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="["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>