javascript - 如何将 CSS 类添加到此脚本函数

Question

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

Answer 1

修改这一行:

$(colToHide).toggle();

...成为这个:

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

请参阅下面的实时实现。

或者，您可以从 JS 中删除 .toggle() 并仅保留 toggleClass('unselectable') 函数，然后简单地添加 display: none 到 CSS 中的 .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>