I’m trying to hide/show an element depending on if the corresponding checkbox is checked or not.
There are two checkbox each one corresponding to an element. The name of thos checkboxes and elements depends on a variable stored in vendorIds array.
The problem is that the code only works for ths second variable stocked in the array.
I suppose that the problem comes from the “for” loop but I’am beginner and I don’t see what’s wrong.
Here is the code :
<script>
jQuery(function($){
console.log(vendorIds);
for (var i=0; i<vendorIds.length; i++) {
var vendorId = vendorIds[i];
console.log(vendorId);
var vendorId = vendorIds[i];
console.log(vendorId);
var ism = 'input[name^="shipping_method['+vendorId+']"]', ismc = ism+':checked',
csa = 'input#ship-to-different-address-checkbox',
rq = '-required', vr = 'validate'+rq, w = 'woocommerce', wv = w+'-validated',
iv = '-invalid', fi = '-field', wir = w+iv+' '+w+iv+rq+fi,
b = '#wcfmd_delvery_time_'+vendorId,
livraison = 'Livraison:1';
console.log(b);
}
(function(i){
// Utility function to shows or hide checkout fields
function showHide( action='show', selector='' ){
if( action == 'show' )
$(selector).show(function(){
$(this).addClass(vr);
$(this).removeClass(wv);
$(this).removeClass(wir);
if( $(selector+' > label > abbr').html() == undefined )
$(selector+' label').append('<?php echo $required_html; ?>');
});
else
$(selector).hide(function(){
$(this).removeClass(vr);
$(this).removeClass(wv);
$(this).removeClass(wir);
if( $(selector+' > label > abbr').html() != undefined )
$(selector+' label > .required').remove();
});
}
// Initializing at start after checkout init (Based on the chosen shipping method)
setTimeout(function(){
if( $(ismc).val() == livraison ) // Choosen "livraison" (Hidding "Take away")
{
showHide('show',b);
}
else
{
showHide('hide',b);
}
}, 100);
// When shipping method is changed (Live event)
$( 'form.checkout' ).on( 'change', ism, function() {
if( $(ismc).val() == livraison )
{
showHide('show',b);
}
else
{
showHide('hide',b);
}
});
})(i);
});
</script>
Thanks in advance.
Have an nice day.
Fred
Advertisement
Answer
Here is the answer if one day someone need it
<script>
jQuery(document).ready(function($){
for (var i=0; i<vendorIds.length; i++) {
var vendorId = vendorIds[i];
var ism = 'input[name^="shipping_method['+vendorId+']"]', ismc = ism+':checked',
b = '#livraison_'+vendorId,
livraison = 'Livraison:1';
// When shipping method is changed (Live event)
$( 'form.checkout' ).on( 'change', ism, function(e) {
var name = e.currentTarget.name;
var dataValue = $('input[name ="'+name+'"]').attr('data-index');
var b = '#livraison_'+dataValue;
var ismc = 'input[name^="shipping_method['+dataValue+']"]:checked';
var livraison = 'Livraison:1';
if( $(ismc).val() == livraison )
{
$(b).show();
}
else
{
$(b).hide();
}
});
// Initializing at start after checkout init (Based on the chosen shipping method)
setTimeout(function(){
$( "input.shipping_method" ).each(function() {
var name = $(this).attr("name");
var type = $(this).attr("type");
var dataValue = $(this).attr('data-index');
var b = '#livraison_'+dataValue;
var ismc = 'input[name^="shipping_method['+dataValue+']"]:checked';
var livraison = 'Livraison:1';
if( ($(this).attr("type") == 'hidden') ) {
if( $(this).val() == 'Livraison:1' ) // Choosen "retrait sur place" (Hidding "Take away")
{
$(b).show();
} else
{
$(b).hide();
}
} else {
if($(this).is(':checked'))
{
if( $(this).val() == 'Livraison:1' ) // Choosen "retrait sur place" (Hidding "Take away")
{
$(b).show();
} else
{
$(b).hide();
}
}
}
});
}, 100);
}
});
</script>