mercredi 3 juin 2015

Wrong code order on Javascript (jQuery)

I have a table where there is a select all checkbox and a checkbox for every element I need to pass in a form through a button that submite the values.
The project is a ruby on rails project and there is a jQuery Javascript file associated to the form that check the behaviour of different click on the checkboxes:

// On document ready
$(function(){
  // Select or Deselect all checkboxes
  $(this).on('click', '#check_all', function() {
    // Select All button disable if it is in undeterminate state
    if ($('#check_all').prop('checked') == false && $('#check_all').prop('indeterminate') == false) {
      $('.t_check:checked').prop('checked', false);
    }
    else {
      $('.t_check:not(:checked)').prop('checked', true);
    }
  });
  // Disabling form submit button if unchecking checkboxes or deselecting all of them
  $(this).on('change', $('.t_check').prop('checked'), function() {
    if (typeof $('.t_check:checked').prop('id') === "undefined")
      $('.t_btn').prop('disabled', true);
    else
      $('.t_btn').prop('disabled', false);
  });
  $(this).on('click', '.t_check', function() {
    if ($('.t_check:checked').length == $('.t_check').length) {
      $('#check_all').prop('indeterminate', false);
      $('#check_all').prop('checked', true);
    }
    else if ($('.t_check:not(:checked)').length == $('.t_check').length) {
      $('#check_all').prop('indeterminate', false);
      $('#check_all').prop('checked', false);
    }
    else {
      $('#check_all').prop('indeterminate', true);
      $('#check_all').prop('checked', true);
    }
  });
});

The whole code is working correctly, checked value of "Select All" checkbox is changed basing on other checkboxes value and t_btn is disabled when no checkbox is checked.
But there is one issue that does not occurr in Firefox: The t_btn is disabled (with an opposite behavior) when 'Select All' is checked and enabled when 'Select All' is unchecked just in Safari and Chrome.

I checked with the debugger and it seems that $(this).on('click', '#check_all', function() {...} is executed after $(this).on('change', $('.print_check').prop('checked'), function() { ... } so that all the checkboxes are still unchecked when checked for enabling/disabling the t_btn.
How can I change my code to make it work with other browsers? If you have suggestion on my code please provide them, I'm still not an expert in jQuery.




Aucun commentaire:

Enregistrer un commentaire