javascript - 如何使用 js/css 禁用特定类的 选择？

Question

我的日历是用 html 表构建的，其中只有少数日期是可选的。所以我需要禁用所有其他数据。

突出显示 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');
  }

});

现在假设我的表格如下所示:

<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>

那么现在如何使用 js/css 禁用 tr 和不可选择的 calss？

Answer 1

首先，您必须通过添加 <td> 来验证您的 HTML 代码<tr> 内的标签而不是直接将文本添加到行并添加 <th> <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>

自 disable 以来，我不确定您所说的禁用 tr 是什么意思。属性仅适用于 <input>标签。

您可以添加名为 unselectable 的类例如，添加要用于“disabled tr”的 css，检查下面的示例:

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

希望这对您有所帮助。

---

.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>