Unlock field when selecting Chekbox

Navigation
0

Scenario: I have a table where the employee can see the data that the company has of it. I need an option for the employee to report disagreements on their cadastral data. When you click the button, it will open a screen that will contain all data (initially blocked), and the employee select a data (through a checkbox), the field will be enabled for data insertion.

I am doubtful how to draw this table.

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

Follow the 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;
};
    
asked by anonymous 13.02.2015 / 13:21

3 answers

3

You can define a class for 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 as many elements as necessary without adding anything to javascript.

To work, it suffices that the data-id attribute of checkbox is equal to data-id of the 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>
    
13.02.2015 / 13:45
3

You can use a function in event onchange of checkbox passing this . Since there will always be input after checkbox , then in function just use nextElementSibling [ 1] to get 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 HTML structure, the above solution should not work. In this case you can also pass the id of input to the 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">
    
13.02.2015 / 13:41
1

If I understand what you want to enable or disable a set of grouped elements and you want to use a checkbox to do it ... then it has this form in JQUERY that I prepared for you. Put a container that in the example I put <label> but you choose. Define an initial state in the example I 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>

In this way the checkbox will be used to enable or disable all elements that are inside the <label> container, except the checkbox element itself.

In order to perform the magic ... with javascript or JQUERY which is the case of the example that 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);
       }
   });
}

It can be improved, for example with a JQUERY plugin that avoids using onclick in html which is less elegant. This however is already a functional form, ready to use:)

    
13.02.2015 / 13:59
Freeing memory with PHP using __destruct Detect if site crashed [closed]