How to disable </td> selection with specific class with js/css?

Question

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.

Function that highlights the td :

/* 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' => is represented by 'e.ctrlKey' or 'e.metaKey'
            * 'Shift' => 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');
  }

});

Now suppose my table looks like below :

<table>
    <th class='weekday'>Mon</th><th class='weekday'>Tue</th><th class='weekday'>Wed</th>

    <tr class='selectable'> 1</tr>    
    <tr class='selectable'> 2</tr>    
    <tr class='unselectable'> 3</tr>
</table>

So now how to disable the tr, with unselectable calss using js/css?

Solution

First you have to validate your HTML code by adding <td> tags inside the <tr> instead of adding the text directly to the row and adding the <th> tags inside the <tr> :

<table>
    <tr>
        <th class='weekday'>Mon</th>
        <th class='weekday'>Tue</th>
        <th class='weekday'>Wed</th>
    </tr>
    <tr class='selectable'> 
        <td>1</td>
    </tr>    
    <tr class='selectable'> 
        <td>2</td>
    </tr>    
    <tr class='unselectable'>
        <td>3</td>
    </tr>
</table>

I'm not sure what you mean by disable tr since the disable attribute work just for <input> tag.

You could add class called unselectable for example and add the css you want to use for "disabled tr", check example bellow :

.unselectable{
     background-color: #ddd;
     cursor: not-allowed;
}

Hope this helps.

---

.unselectable{
  background-color: #ddd;
  cursor: not-allowed;
}

<table border='1'>
  <tr>
    <th class='weekday'>Mon</th>
    <th class='weekday'>Tue</th>
    <th class='weekday'>Wed</th>
  </tr>
  <tr class='selectable'> 
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>    
  <tr class='selectable'> 
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>    
  <tr class='unselectable'>
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>
</table>

Comments

[Ravikumar Chunduri]

var rows = $('td .selectable').not(':first'); but its not working, though its behaving something like non of the rows are being selected now

[Vinothkumar]

If your HTML code is same as the above, then there is no <td> tags in your code. So if you use $('td .selectable').not(':first'); obviously it does not work. I have mentioned "tr" instead of "td" . Please check that and if it does not work still, lets try something else