Highlight selected row of the table

Question

I have a table where I select a Checkbox to enable a certain input. I would like that when I selected that same checkbox, the entire row of the table would be highlighted, showing that the user selected that row.

var cbs = document.getElementsByClassName('cb');

function cbClick() {
  var input = document.querySelector('input[data-id="' + this.getAttribute('data-id') + '"]:not([type="checkbox"])');
  input.disabled = !this.checked;
}

for (var i in cbs) {
  cbs[i].onclick = cbClick;
}

<table class="table" border="1">
  <thead>
    <tr>
      <td></td>
      <th>CAMPO</th>
      <th>INFORMAÇÃO ATUAL</th>
      <th>INFORMAÇÃO CORRETA</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="cb" data-id="DtNascimento">
      </td>
      <td>Data de Nascimento</td>
      <td>11/11/1111</td>
      <td>
        <input type="text" data-id="DtNascimento" disabled class="form-control datapicker" name="DtNascimento" id="DtNascimento">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="cb" data-id="DsEstadoCivil">
      </td>
      <td>Estado Civil</td>
      <td>Solteiro</td>
      <td>
        <input type="text" data-id="DsEstadoCivil" disabled class="form-control" name="DsEstadoCivil">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="cb" data-id="DsOcorrencia">
      </td>
      <td>Grau de Instrução</td>
      <td>Segundo Grau Completo</td>
      <td>
        <input type="text" data-id="DsOcorrencia" disabled class="form-control" name="DsOcorrencia">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

An alternative with pure Javascript:

_{Comments on the code}

var cbs = document.getElementsByClassName('cb');

function cbClick() {
  var input = document.querySelector('input[data-id="' + this.getAttribute('data-id') + '"]:not([type="checkbox"])');
  input.disabled = !this.checked;

    // parentNode.parentNode = td > tr subindo a hierarquia
    if(this.checked) {
        // muda a cor do fudo quando for marcado
        input.parentNode.parentNode.style.background = '#e1e1e1'; 
    } else {
        // remove a cor do fundo ao desmarcar
        input.parentNode.parentNode.style.background = '';
    }
}

for (var i in cbs) {
  cbs[i].onclick = cbClick;
}

<table class="table" border="1">
  <thead>
    <tr>
      <td></td>
      <th>CAMPO</th>
      <th>INFORMAÇÃO ATUAL</th>
      <th>INFORMAÇÃO CORRETA</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
          <input type="checkbox" class="cb" data-id="DtNascimento" />
      </td>
      <td>Data de Nascimento</td>
      <td>11/11/1111</td>
      <td>
          <input type="text" data-id="DtNascimento" disabled class="form-control datapicker" name="DtNascimento" id="DtNascimento" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="cb" data-id="DsEstadoCivil">
      </td>
      <td>Estado Civil</td>
      <td>Solteiro</td>
      <td>
          <input type="text" data-id="DsEstadoCivil" disabled class="form-control" name="DsEstadoCivil" />
      </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" class="cb" data-id="DsOcorrencia" />
      </td>
      <td>Grau de Instrução</td>
      <td>Segundo Grau Completo</td>
      <td>
          <input type="text" data-id="DsOcorrencia" disabled class="form-control" name="DsOcorrencia" />
      </td>
    </tr>
  </tbody>
</table>

Answer 2

I didn’t quite understand the reason for your mix of jQuery with pure JS, but anyway I believe it solves:

$(input).closest('tr').css('background', '#e1e1e1');