jeudi 28 janvier 2016

Event to some dynamically generated checkbox issue

My english is not good but I need help please!!!

I am dynamically adding rows to a table, add textbox and checkbox's.

In the change function I want: When the first checkbox is marked the others are disabled and the texbox change their value

The updatebox function It works perfectly for each generated row, but change function only it works with the first.

function agregar(){
var fila = $('<tr></tr>');
var columna = $('<td></td>');
var input = $('<input type="text" />').attr({name: 'idiomas_usu[]',  id:'list1'});
columna.append(input);
input = $('<input type="checkbox" />').attr({name: 'dos', class:'cb2', id:'cb2' });
columna.append(input);
input = $('<input type="text" />').attr({name: 'idiomas_usu[]', id:'list2'});
columna.append(input);
input = $('<input type="checkbox" />').attr({name: 'dos', class:'cb2',  id:'cb3' });
columna.append(input);
input = $('<input type="text" />').attr({name: 'idiomas_usu[]', id:'list3'});
columna.append(input);
input = $('<input type="checkbox" />').attr({name: 'dos', class:'cb2', id:'cb4' });
columna.append(input);
input = $('<input type="text" />').attr({name: 'idiomas_usu[]', id:'list4'});
columna.append(input);
input = $('<input type="checkbox" />').attr({name: 'dos', class:'cb2', id:'cb5' });
columna.append(input);
fila.append(columna);
$('#tab_logic').append(fila);
}

function updateBox(event){
  var input = $(this).prev();
        if(this.checked) {
    input.val("1");
    }
  else {
    input.val("");
  }
}

 $('#boton').click(agregar);
 $('#tab_logic').on('click', '.cb2', updateBox);

function change(event){
var $this = $(this);
if ($this.is("#cb2")) {
    if ($("#cb2:checked").length > 0) {
        $("#cb3").prop({ disabled: true, checked: false });
          $("#cb4").prop({ disabled: true, checked: false });
             $("#cb5").prop({ disabled: true, checked: false });
             $("#list2").prop({ disabled: true, value: '' });
             $("#list3").prop({ disabled: true, value: '' });
             $("#list4").prop({ disabled: true, value: '' });

    } else {
        $("#cb3").prop("disabled", false);
        $("#cb4").prop("disabled", false);
        $("#cb5").prop("disabled", false);
    }
   } 
 }

Here's the code running: JSfiddle

Please help me!!!!




Aucun commentaire:

Enregistrer un commentaire