Enabling fields (array) with Jquery when checking checkbox

Question

Good afternoon guys, once again I need your help for the following problem:

Imagine the following form records below:

<input  id="check[1]"  name="check[1]" type="checkbox" value="">
<input  id="campo1[1]" name="campo1[1]" type="text" value="" disabled>
<select id="campo2[1]" name="campo2[1]" disabled></select>

<input  id="check[2]"  name="check[2]" type="checkbox" value="">
<input  id="campo1[2]" name="campo1[2]" type="text" value="" disabled>
<select id="campo2[2]" name="campo2[2]" disabled></select>

<input  id="check[3]"  name="check[3]" type="checkbox" value="">
<input  id="campo1[3]" name="campo1[3]" type="text" value="" disabled>
<select id="campo2[3]" name="campo2[3]" disabled></select>

<input  id="check[4]"  name="check[4]" type="checkbox" value="">
<input  id="campo1[4]" name="campo1[4]" type="text" value="" disabled>
<select id="campo2[4]" name="campo2[4]" disabled></select>

I would like the "campo1" and "campo2" fields to be enabled only after checking the corresponding checkbox. Detail, the number of records may be greater than 4.

You can help me?

Answer 1

$(document).ready(function() {
    $('input[type=checkbox]').click(function() {
        var campo1 = $(this).next();
        var campo2 = $(this).next().next();

        if ($(this).is(':checked')) {
            campo1.attr('disabled', false);
            campo2.attr('disabled', false);
        } else {
            campo1.attr('disabled', true);
            campo2.attr('disabled', true);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input  id="check[1]"  name="check[1]" type="checkbox" value="">
<input  id="campo1[1]" name="campo1[1]" type="text" value="" disabled>
<select id="campo2[1]" name="campo2[1]" disabled></select>

<input  id="check[2]"  name="check[2]" type="checkbox" value="">
<input  id="campo1[2]" name="campo1[2]" type="text" value="" disabled>
<select id="campo2[2]" name="campo2[2]" disabled></select>

<input  id="check[3]"  name="check[3]" type="checkbox" value="">
<input  id="campo1[3]" name="campo1[3]" type="text" value="" disabled>
<select id="campo2[3]" name="campo2[3]" disabled></select>

<input  id="check[4]"  name="check[4]" type="checkbox" value="">
<input  id="campo1[4]" name="campo1[4]" type="text" value="" disabled>
<select id="campo2[4]" name="campo2[4]" disabled></select>

Follow the example. Clicking on any of the checkboxes checks whether it is checked or not. And to get the two fields after checkbox I used the next function of jQuery.

Answer 2

Hello, well I would do something like

<div class="myclass">
   <input  id="check[1]"  name="check[1]" type="checkbox" value="">
   <input  id="campo1[1]" name="campo1[1]" type="text" value="" disabled>
   <select id="campo2[1]" name="campo2[1]" disabled></select>
</div>

<script type="text/javascript">    
   $("myChek").change(function(){
      if($(this).attr("checked")){
         $(".myclass").find("input").addClass("lockedField"); // classe para altera a cor do elemento
         $(".myclass").find("input").attr("readonly", true); // bloqueia input
      } else {
         // Bloqueia
      }
})
</script>

hope it helps! D