Unlock field when selecting Chekbox

Question

Setting: I have a table where the employee can view the data that the company has of it. I need an option for the employee to report divergences in their registration data. Clicking on the button will open a screen containing all data (initially blocked), and the employee will select a data (via a checkbox), the field will be enabled to enter data.

I’m doubting how to draw up this table.

I have it working, but I am using a function for each field, however I have many fields, and I wonder if there is a way to do, that does not need to use so many fields in the script.

Follow Fiddle for better understanding. Example here

HTML

<input type="checkbox" id="Cpf">
<input type="text" id="CpfT">

<input type="checkbox" id="RG">
<input type="text" id="RGT">

JS:

document.getElementById('Cpf').onchange = function() {
    document.getElementById('CpfT').disabled = !this.checked;
};
document.getElementById('RG').onchange = function() {
    document.getElementById('RGT').disabled = !this.checked;
};

Answer 1

You can use a function in the event onchange of checkbox passing the this. Whereas there will always be a input after the checkbox, then in the function just use the nextElementSibling^[1] to catch the next element.

Example:

function muda(el) {
  el.nextElementSibling.disabled = !el.checked;
}

<input type="checkbox" id="Cpf" onchange="muda(this);">
<input type="text" id="CpfT" disabled="true">

<input type="checkbox" id="RG" onchange="muda(this);">
<input type="text" id="RGT" disabled="true">

If you think that in the future there may be a change in the structure of HTML, the above solution should not work. In that case you can also pass the id of the input in function:

function muda(el, id) {
    document.getElementById(id).disabled = !el.checked;
}

<input type="checkbox" id="Cpf" onchange="muda(this, 'CpfT');">
<input type="text" id="CpfT" disabled="true">

<input type="checkbox" id="RG" onchange="muda(this, 'RGT');">
<input type="text" id="RGT" disabled="true">

Answer 2

You can set a class for the checkboxes and then set the onclick of all of them in a single function.

In the example below I used a custom attribute ("data-id") to associate checkboxes with inputs. You can define how many elements you need without adding anything to javascript.

For it to work it is enough that the attribute data-id of checkbox is equal to data-id of input.

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;
}

<input type="checkbox" class="cb" data-id="cpf">
<input type="text" data-id="cpf" disabled>
    
<input type="checkbox" class="cb" id="RG" data-id="rg">
<input type="text" data-id="rg" disabled>
    
<input type="checkbox" class="cb" data-id="teste">
<input type="text" data-id="teste" disabled>

Answer 3

If I understand what you want is to enable or disable a set of grouped elements and want to use a checkbox to do so... then you have this form in JQUERY I prepared for you. Put a container that in the example I put the <label> but you choose. Sets an initial state in the example define disabled and readonly depending on what I use.

<label> 
    <input type="checkbox" onclick="checkboxContent(this)"/> 
    <button  disabled>exemplo</button>
    <input type="text" value="exemplo" readonly>
</label>

Thus the checkbox will serve to enable or disable all elements that are inside the container <label>, except the checkbox element itself.

To then perform the magic with... javascript or JQUERY which is the case of the example I put you use:

function checkboxContent(element) {
   var cb = $(element);
   var value = cb.is(':checked');
   cb.parent().children('input, button').each(function () {
       var t = $(this);
       if (t.attr('type') !== 'checkbox') {
           t.attr('readonly', !value);
           t.attr('disabled', !value);
       }
   });
}

Can be improved, for example with a JQUERY plugin that prevents the use of onclick html which is less elegant. This however is already a functional form, ready to use :)