title: How to disable </td> selection with specific class with js/css?
body: <p>I have my Calendar constructed with html table, where few of the dates can only be  selectable. So i need to disable all the other data.</p>
  
  <p><strong>Function that highlights the td :</strong></p>
  
  <pre><code>/* Get all rows from your 'table' but not the first one 
          * that includes headers. */
  var rows = $('td').not(':first');
  
  /* Create 'click' event handler for rows */
  rows.on('click', function (e) {
  
    /* Get current row */
    var row = $(this);
  
    /* Check if 'Ctrl', 'cmd' or 'Shift' keyboard key was pressed
              * 'Ctrl' =&gt; is represented by 'e.ctrlKey' or 'e.metaKey'
              * 'Shift' =&gt; is represented by 'e.shiftKey' */
  
    if ((e.ctrlKey || e.metaKey) || e.shiftKey) {
      /* If pressed highlight the other row that was clicked */
      row.addClass('highlight');
    } else {
      /* Otherwise just highlight one row and clean others */
      rows.removeClass('highlight');
      row.addClass('highlight');
    }
  
  });
  </code></pre>
  
  <p>Now suppose my table looks like below :</p>
  
  <pre><code>&lt;table&gt;
      &lt;th class='weekday'&gt;Mon&lt;/th&gt;&lt;th class='weekday'&gt;Tue&lt;/th&gt;&lt;th class='weekday'&gt;Wed&lt;/th&gt;
  
      &lt;tr class='selectable'&gt; 1&lt;/tr&gt;    
      &lt;tr class='selectable'&gt; 2&lt;/tr&gt;    
      &lt;tr class='unselectable'&gt; 3&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So now how to disable the tr, with unselectable calss using js/css?</p>