事件到一些动态生成的复选框问题

Question

我的英语不好，但是我需要帮助！！！

我正在向表中动态添加行，添加文本框和复选框。

在我想要的更改功能中：选中第一个复选框时，其他复选框被禁用，而texbox更改其值

updatebox函数它对于每个生成的行都非常适用，但是change函数仅适用于第一行。

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("");
  }
}

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

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

这是运行的代码： JSfiddle

请帮我！！！！

Answer 1

您具有相同的ID，因此它会抢先出现。 一种选择是给您的行一个ID，并在jQuery选择器中使用它来定位正确的项目，例如： https : //jsfiddle.net/rko41z88/8/

以下是小提琴的摘录，请转到小提琴以查看整个过程。

像这样在agregar()函数中为行提供一个ID。

window.myRowCnt = window.myRowCnt+1;
var fila = $('<tr id="row'+window.myRowCnt+'"></tr>');

然后使用该行ID定位此类正确的项目...

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

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

Answer 2

这可能不是您的最佳答案，但是我建议使用React.js框架。 最好用于动态Web应用程序。