javascript - 如何向此脚本功能添加CSS类

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            var $chk = $("#grpChkBox input:checkbox");
            var $tbl = $("#someTable");

            $chk.prop('checked', true);

            $chk.click(function () {
                var colToHide = $tbl.find("." + $(this).attr("name"));
                $(colToHide).toggle();
            });
        });
    </script>
 <div id="grpChkBox">
	<table border="0">
  <tbody>
    <tr>
      <td><input type="checkbox" name="Column_1" /> Column 1</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="Column_2" /> Column 2</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="Column_3" /> Column 3</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="Column_4" /> Column 4</td>

    </tr>
  </tbody>
</table>
</div>

<table border="1" cellpadding="3" cellspacing="2" id="someTable">
  <tr bgcolor="#CCCCCC" class="th">
    <th class="Column_1">Column 1</th>
    <th class="Column_2">Column 2</th>
    <th class="Column_3">Column 3</th>
    <th class="Column_4">Column 4</th>
  </tr>
    <tr>
      <td class="Column_1">Data 1</td>
      <td class="Column_2">Data 2</td>
      <td class="Column_3">Data 3</td>
      <td class="Column_4">Data 4</td>
    </tr>
</table>

此脚本显示或隐藏表中的列。当未选中该复选框且该列处于隐藏状态时，我想向该列添加class =“ unselectable”。

例：
如果第1列被隐藏，则其类为class =“ Column_1 unselectable”

最佳答案

修改此行：

$(colToHide).toggle();

...是这样的：

$(colToHide).toggle().toggleClass('unselectable');

参见下面的实时实施。

或者，您可以从JS中删除.toggle()并仅保留toggleClass('unselectable')函数，然后只需在CSS中的display: none类中添加.unselectable即可。

.unselectable {
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Likely future */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(function() {
    var $chk = $("#grpChkBox input:checkbox");
    var $tbl = $("#someTable");

    $chk.prop('checked', true);

    $chk.click(function() {
      var colToHide = $tbl.find("." + $(this).attr("name"));
      $(colToHide).toggle().toggleClass('unselectable');
    });
  });
</script>
<div id="grpChkBox">
  <table border="0">
    <tbody>
      <tr>
        <td><input type="checkbox" name="Column_1" /> Column 1</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="Column_2" /> Column 2</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="Column_3" /> Column 3</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="Column_4" /> Column 4</td>

      </tr>
    </tbody>
  </table>
</div>

<table border="1" cellpadding="3" cellspacing="2" id="someTable">
  <tr bgcolor="#CCCCCC" class="th">
    <th class="Column_1">Column 1</th>
    <th class="Column_2">Column 2</th>
    <th class="Column_3">Column 3</th>
    <th class="Column_4">Column 4</th>
  </tr>
  <tr>
    <td class="Column_1">Data 1</td>
    <td class="Column_2">Data 2</td>
    <td class="Column_3">Data 3</td>
    <td class="Column_4">Data 4</td>
  </tr>
</table>