samedi 4 février 2017

Checkbox ("checked",true) on div click, but $checkbox.change(function()... is not taking this into consideration

I have the following situation:

There is a table with records and a set of buttons (add, edit, delete etc). I have a checkbox at the beginning of every record (for multiple selection -> delete).

I want each record to be also selected when the user clicks on the table row (not necessarily on the checkbox inside the row). I have done this using jQuery.

The problem is that the button DELETE is supposed to be active (just to change his transparency in this early stage) only when 1 or more records are selected.

Everything works fine when I click on the checkboxes, but the function doesn't take into consideration the checkboxes if they are checked due to click elsewhere on the tr.

////TABLE CHECKBOX - check-on-tr-click////
$('table.main-t').delegate('tr', 'click', function(event)
{
        var check = $(this).children().find('input[data-type="sel"]');
        if ($(check).is(':checked'))
        {
            $(check).prop('checked', false);

        }
        else
        {
            $(check).prop('checked', true);
        }
}); 

////BUTTONS - make them active after record selection////
$('input[data-type="sel"]').change(function()
{
    if($(this).is(':checked'))
    {
        $('[data-type="btn-t"]').removeClass('transparent');
    }
    else
    {
        if ($('input[data-type="sel"]:checked').length === 0)
        {
            $('[data-type="btn-t"]').addClass('transparent');           
        }
    }   
});

As I have said, the second function works fine, but only if I check the checkbox by clicking on it, and not by using the first function.

Please help me figure it out, Thanks!

Aucun commentaire:

Enregistrer un commentaire