Javascript 事件来解决某些动态生成的复选框问题

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

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

在change函数中，我希望：当第一个复选框被标记时，其他复选框被禁用，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);

函数agregar（）{
var fila=$（''）；
var columna=$（''）；
变量输入=$（''）.attr({
名称：'idiomas_usu[]'，
id:'列表1'
});
columna.append（输入）；
输入=$（''）.attr({
名称：“dos”，
类别：“cb2”，
id:'cb2'
});
columna.append（输入）；
输入=$（''）.attr({
名称：'idiomas_usu[]'，
id:'列表2'
});
columna.append（输入）；
输入=$（''）.attr({
名称：“dos”，
类别：“cb2”，
id:'cb3'
});
columna.append（输入）；
输入=$（''）.attr({
名称：'idiomas_usu[]'，
id:'列表3'
});
columna.append（输入）；
输入=$（''）.attr({
名称：“dos”，
类别：“cb2”，
id:'cb4'
});
columna.append（输入）；
输入=$（''）.attr({
名称：'idiomas_usu[]'，
id:'列表4'
});
columna.append（输入）；
输入=$（''）.attr({
名称：“dos”，
类别：“cb2”，
id:'cb5'
});
columna.append（输入）；
fila.append（columna）；
$（'tab_logic'）。追加（fila）；
}
函数updateBox（事件）{
var输入=$（this.prev（）；
如果（选中此项）{
输入值。val（“1”）；
}否则{
输入.val（“”）；
}
}
功能更改（事件）{
var$this=$（this）；
如果（$this.is（“#cb2”））{
如果（$（“#cb2:选中”）。长度>0{
美元（“#cb3”）.prop({
残疾人:对,，
勾选：假
});
美元（“#cb4”）.prop({
残疾人:对,，
勾选：假
});
美元（“#cb5”）.prop({
残疾人:对,，
勾选：假
});
$（“#列表2”）.prop({
残疾人:对,，
值：“”
});
$（“#列表3”）.prop({
残疾人:对,，
值：“”
});
$（“#列表4”）.prop({
残疾人:对,，
值：“”
});
}否则{
$（“#cb3”）.prop（“禁用”，false）；
$（“#cb4”）.prop（“禁用”，false）；
$（“#cb5”）.prop（“禁用”，false）；
}
}
}
$（'#boton'）。单击（agregar）；
$（'tab_logic'）。在（'click'，'cb2'，updateBox）上；
$（'tab_logic'）。在（'click'，'cb2'，change）上；

下面是正在运行的代码：

---

请帮帮我

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

您拥有所有相同的ID，因此它将首次出现。一个选项是为行指定一个ID，并在jQuery选择器中使用该ID来定位正确的项，如下所示：

下面是小提琴的一个片段，到小提琴那里去看看整个小提琴的动作

在

agregar（）函数中为行指定一个ID，如下所示

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

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

这不是一个答案，这是一个非常固执己见的评论，这正是我所需要的：）@pratikwebdev它可以删除禁用的属性：对于复选框，我可以发送表单并捕获它们的值