Question

凭借jquery的能力，我可以动态添加或删除复选框字段。我有main checkbox，如果点击它会显示sub_item复选框。要添加前面提到的其他复选框，我是cloning，然后为新复选框分配id和name。但我有两个主要的难题：如果选中main_item复选框，则会显示其sub_item，但是当我克隆时，我想要显示新main_item的{{1}}最初隐藏？其次，分配给新sub_item的{{1}}和id不正确，它将值分配给name标记而不是复选框。 JSFIDDLE

JQUERY

sub_items

HTML

<li>

Answer 1

尝试

$('#btnAdd').click(function () {
    var num = $('.clonedSection').length;
    var newNum = num + 1;

    var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum);
    newSection.find('input[type="text"]').val('');
    newSection.find('input[type="checkbox"]').prop('checked', false);
    //hide sub item
    newSection.find('.sub-item').hide();

    //change the input element selectors to use name
    newSection.find('input[name^="main_item_"]').attr('id', 'main_item_' + newNum).attr('name', 'main_item_' + newNum).attr('placeholder', 'Item #' + newNum + ' Name');
    newSection.find('input[name^="sub_item_"]').attr('id', 'sub_item_' + newNum).attr('name', 'sub_item_' + newNum);
    newSection.find('input[name^="other_item_"]').attr('id', 'other_item_' + newNum).attr('name', 'other_item_' + newNum);
    newSection.insertAfter('#pq_entry_' + num).last();

    $('#btnDel').prop('disabled', '');

    if (newNum == 10) $('#btnAdd').prop('disabled', 'disabled');
});

演示：Fiddle

动态添加和删除复选框输入字段

1 个答案: