Question

I currently have the following table:

Checkbox (ID)  |  Training Course Code  |  Training Course Name  |  ....
   [ ]         |  DE00155115-1          |  H&S Exec 1            |  ....
   [ ]         |  DE00155115-1          |  H&S Exec 1            |  ....
   [ ]         |  DE00074454-2          |  H&S Exec 2            |  ....

Each course runs more than once but can only be selected once hence the multiple IDs per course code.

What I want to do is be able to disable / highlight the duplicate rows once one has been selected.

In the above example if the first row was selected, the second would disable and vice versa. If the third row was selected nothing would happen.

I have attempted several functions using jQuery but not really sure where to start and build from.

Answer 1

Here’s a long, and slightly involved, option:

$('table')
    .on('click','input:checkbox',
        function(){
            var that = $(this),
                thatRow = that.closest('tr'),
                id = that.parent().next('td').text();

            if (that.is(':checked')){
                that
                    .closest('tbody')
                    .find('tr td:nth-child(2)')
                    .each(
                        function(){
                            if ($(this).text() == id){
                                $(this)
                                    .closest('tr')
                                    .not(thatRow)
                                    .addClass('disabled')
                                    .find('input:checkbox')
                                    .prop('disabled',true);
                            }
                        });
            }
            else {
                that
                    .closest('tbody')
                    .find('tr td:nth-child(2)')
                    .each(
                        function(){
                            if ($(this).text() == id){
                                $(this)
                                    .closest('tr')
                                    .not(thatRow)
                                    .removeClass('disabled')
                                    .find('input:checkbox')
                                    .prop('disabled',false);
                            }
                        });
            }
        });​

JS Fiddle demo.

References:

• addClass().
• :checkbox selector.
• :checked selector.
• closest().
• each().
• find().
• is().
• next().
• not().
• :nth-child() selector.
• on().
• parent().
• prop().
• removeClass().
• text().