Question

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

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

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

updatebox函数它适用于每个生成的行，但更改函数只适用于第一个。

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应用程序。

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

2 个答案: