Enabling fields (array) with Jquery when checking checkbox

Question

Enabling fields (array) with Jquery when checking checkbox

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

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 fields "field1" and "field2" to be enabled only after marking the corresponding checkbox. Detail, the number of records may be greater than 4.

Can you help me?

php array

asked by anonymous 23.09.2016 / 18:32

2 answers

How to create multiple .txt files? Array initialization error

score 3 · 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><inputid="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 is checked whether the checkbox is checked or not. And to get the two fields after the checkbox I used the jQuery function next.

score 1 · 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>

I hope it helps! : D