Question

I have a table set up… here is the relevant HTML format…

<table class="booking table">
   <tbody class="time_period_rows">
      <tr class>
        <td> ... </td>
      </tr>
      <tr class="booked">
        <td> ... </td>
      </tr>
       .
       .
      <tr class="selected">
        <td> ... </td>
      </tr>

And the table goes on from there. Fundamentally I have table of appointment slots. The “booked” class means exactly that. The “selected” class is toggled on and off as a the time for a new booking is selected. I simply want to stop a click being recognised when they try and select one where the “booked” class exists. Here is my current jQuery code,

$('.time_period_rows tr:not(.booked)').click(function(){
    $('.selected').removeClass('selected');
    $(this).toggleClass('selected');
});

Pretty darn simple. But the filtering is not working. Right now I can select any row. Can anyone see why?

Many Thanks

Answer 1

$('.time_period_rows tr').on('click', function(){
    if (!$(this).is('.booked')) {
        $('.selected').removeClass('selected');
        $(this).toggleClass('selected');
    }
});