How to add a CSS class to this script function

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>

This script Shows or Hides a column in a table. When the checkbox is not checked and the column is hidden, I would like to add class="unselectable" to the column.

Example: If Column 1 was hidden its class would be class="Column_1 unselectable"

You want add class to the column and pretend it from hiding? — Alexis
– Alexis, Commented Apr 2, 2018 at 14:36
Why do you want to add user-select: none; do something that's hidden (display: none;)? — zgood
– zgood, Commented Apr 2, 2018 at 15:10

Jon Uleis · Accepted Answer · 2018-04-02 14:36:50Z

Modify this line:

$(colToHide).toggle();

...to be this:

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

See below for live implementation.

Alternatively, you could remove the .toggle() from your JS and leave only the toggleClass('unselectable') function, and simply add display: none to the .unselectable class in your 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().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>

That is exactly what I needed! Thank you so much. I want the text in those hidden columns to not be selected during a cut and paste. This works perfect for my needs...

Collectives™ on Stack Overflow

How to add a CSS class to this script function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related