3

Possuo uma tabela, onde os campos iniciam desabilitados, e em um checkbox eu escolho qual campo habilitar. Com a tag input, funciona perfeitamente. Porém quando tento utilizar com o select o mesmo script não funciona.

Tentei adicionar este método apenas para o select. O mesmo funciona, porém perde o destaque da linha.

 document.getElementById('Sexo').onchange = function () {
        document.getElementById('TpSexo').disabled = !this.checked;
    };

Código em Utilização:

    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">
  <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="TpSexo"></td>
         <td> Sexo</td>
         <td>Feminino</td>
         <td>
         <select data-id="TpSexo" disabled class="form-control" name="TpSexo">
        	 <option value=" "> </option>
       	 	 <option value="F">Feminino</option>
        	 <option value="M">Masculino</option>
    	 </select>
        	 </td>
	</tr>
  </tbody>
</table>

2 Respostas 2

3

Utilizando o querySelectorAll, retorno todos os elementos que possuem o data-id, como no seu caso sempre são dois é só usar o índice 1 que representa o segundo elemento.

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

    function cbClick() {
        var input = document.querySelectorAll('[data-id="' + this.getAttribute('data-id') +'"]')[1];
        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">
  <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="TpSexo"></td>
         <td> Sexo</td>
         <td>Feminino</td>
         <td>
         <select data-id="TpSexo" disabled class="form-control" name="TpSexo">
        	 <option value=" "> </option>
       	 	 <option value="F">Feminino</option>
        	 <option value="M">Masculino</option>
    	 </select>
        	 </td>
	</tr>
  </tbody>
</table>

1
  • 1
    Funcionou perfeitamente. E obrigado pela explicação.
    – Randrade
    Commented 23/02/2015 às 12:32
2

Faltou selecionar o select na função querySelector da cbClick:

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

    function cbClick() {
        var input = document.querySelector('input[data-id="' + this.getAttribute('data-id') + '"]:not([type="checkbox"]), select[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">
  <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="TpSexo"></td>
         <td> Sexo</td>
         <td>Feminino</td>
         <td>
         <select data-id="TpSexo" disabled class="form-control" name="TpSexo">
        	 <option value=" "> </option>
       	 	 <option value="F">Feminino</option>
        	 <option value="M">Masculino</option>
    	 </select>
        	 </td>
	</tr>
  </tbody>
</table>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .