Enable select HTML with

Navigation
3

I have a table, where fields start disabled, and in a checkbox I choose which field to enable. Tagged input , works perfectly. But when I try to use with select the same script does not work.

I tried to add this method only to select . The same works, but loses the highlight of the line. 

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

Code in Use: 

    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>
    
asked by anonymous 23.02.2015 / 13:10

2 answers

3

Using querySelectorAll , return all elements that have data-id , as in your case there are always two only use index 1 representing the second element. 

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>
    
23.02.2015 / 13:29
2

Failed to select select in function querySelector of 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>
    
23.02.2015 / 13:33
Print json data received in jquery post Fill all fields of an Object in an iterative way