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

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?

javascriptjqueryhtmlcssrazor


Solution 1:[1]

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>

Solution 2:[2]

$('.unselectable').prop("disabled",true)

This will disable the <tr> elements with class unselectable.

Solution 3:[3]

Just change your selection on your event 

 var rows = $('td .selectable');

Solution 4:[4]

var rows = $('tr .selectable').not(':first');

use the above line to get rows with class name 'selectable'. Also add <td> tags inside your <tr> </tr> row tags to add contents.

Solution 5:[5]

you can use it and write your condition instead of below condition text =>

<td [style.cursor]="condition ? 'not-allowed':'pointer' ">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3
Solution 4 Mr Lister
Solution 5 mahsa k

Related Questions