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>