mercredi 9 novembre 2016

My .on jquery event doesn't work correctly after ajax form submit

For example:

Before ajax call, the checkbox(input[value = All]) will only checked if the all other 3 checkboxes is checked.

After ajax call, the checkbox(input[value = All]) will checked even if I didn't checked all other checkboxes. e.g 2 of 3 checkbox:checked.

Note: I used wpcf7 for the form.

$('#day_options').on('click','input[name=day_options]',  function(){
    var dayOptions = $('input[name=day_options]:not(input[value=All])'),
        checkedOptions = $("input[type=checkbox]:checked").length,
        selectAllCheckbox = $('input[value=All]:not(input[name=days_to_attend])');

    if(!checkedOptions) {
        selectAllCheckbox.prop('disabled', false);
    }

    if(dayOptions.is('checked')){
        selectAllCheckbox.prop('disabled', true).prop('checked', false);
    }

    if (checkedOptions == dayOptions.length) {
        selectAllCheckbox.prop('checked', true).prop('disabled', false);
            $('input[name=day_options]:not(input[value=All])').prop('checked', false).prop('disabled', true);
    }

    if(selectAllCheckbox.is(':checked')){
        dayOptions.prop('checked', false).prop('disabled', true);
    }else{
        selectAllCheckbox.removeAttr('checked');
        dayOptions.prop('disabled', false);
    }
});

Aucun commentaire:

Enregistrer un commentaire