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