Question

我想，当我双击卡片弹出对话框时。然后可以创建动态checkBoxes。创建复选框时，可以编辑每个复选框的文本。如果我有例如，问题就来了。创建了3个复选框并想要编辑其中一个，所有其他复选框的名称与我要编辑的名称相同。您可以在下图中看到问题：

Jquery的：

function addCheckbox(name, status) {
        status = status || false;

        var container = $('#divboxs');
        var inputs = container.find('input');
        var id = inputs.length + 1;
        var data = {
            status: status,
            name: name
        };

        var div = $('<div />', { class: 'allcheckbox' });
        $('<input />', {
            type: 'checkbox',
            id: 'cb' + id,
            value: name
        }).prop('checked', status).on('change', function () {
            data.status = $(this).prop('checked');
        }).appendTo(div); /* set checkbox status and monitor changes */

        $('<label />', {
            'for': 'cb' + id,
            text: name
        }).appendTo(div);

        var $editCheckBox = $('<p />', {
            class: 'editCheckBox',
            text: 'Edit'
        }).appendTo(div);

        div.appendTo(container);

        container.data('checkboxes').push(data);
    }

        $('#divboxs').on('click', '.editCheckBox', function () {
        var text = $(this).parents(".allcheckbox").find("label").text();
        var input = $('<input id="attribute" value="' + text + '" />')
        $('.allcheckbox').text('').append(input);
        input.select();

        input.blur(function () {
            var text = $('#attribute').val();
            $('#attribute').parent().text(text);
            $('#attribute').remove();
        });
    });    

});

我认为这是代码的一部分，它给我带来了问题： var input = $('<input id="attribute" value="' + text + '" />')

我想我应该使用CheckBox的ID：id: 'cb' + id，而不是id="attribute"。如何在这个地方插入checkBox的id？

Live Demo

Answer 1

确定。因此，您的代码存在一些问题。

第一个存在。您将新创建的输入附加到所有“allcheckbox”类元素

$('.allcheckbox').text('').append(input);

第二个问题是，在同一行中你要清空整个DIV。一旦您想要更新输入并使用新值标记，这将产生问题。

所以隐藏任何你不想显示的元素，一旦调用blur事件，删除新输入，更新值然后显示你之前隐藏的元素。

在下面找到更新的小提琴： http://jsfiddle.net/62QY8/122/

另外，还有一点注意事项。 “class”是一个JavaScript保留字。所以请使用“classname”。即

    var $editCheckBox = $('<p />', {
        classname: 'editCheckBox',
        text: 'Edit'
    }).appendTo(div);

Answer 2

我不确定这里到底做了什么。但是，如果想要一次编辑复选框，那么请请下面的小提琴

http://jsfiddle.net/62QY8/121/

    $(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');

var cnt = 0,
    $currentTarget;
$('#AddCardBtn').click(function () {
    var $newDiv = $div.clone(true);
    cnt++;
    $newDiv.prop("id", "div" + cnt);

    $newDiv.data('checkboxes', []);

    $('#userAddedCard').append($newDiv);
    //      alert($('#userAddedCard').find("div.sortable-div").length);        
});

// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
    $currentTarget = $(e.target);   

    $('.allcheckbox').remove(); // Remove checkboxes
    $('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */

    /* Add checkboxes from card data */
    $.each($currentTarget.data('checkboxes'), function (i, checkbox) {
        addCheckbox(checkbox.name, checkbox.status);
    });

    $('#modalDialog').dialog({
        modal: true,
        height: 600,
        width: 500,
        position: 'center'
    });
    return false;

});

$("#Getbtn").on("click", function () {

    $currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes')); 
    /* Copy checkbox data to card */

    $('#modalDialog').dialog("close");
});

// Add a new checkBox
$('#btnSaveCheckBox').click(function () {
    addCheckbox($('#checkBoxName').val());
    $('#checkBoxName').val("");
});

function addCheckbox(name, status) {
    status = status || false;

    var container = $('#divboxs');
    var inputs = container.find('input');
    var id = inputs.length + 1;
    var data = {
        status: status,
        name: name
    };

    var div = $('<div />', { class: 'allcheckbox' ,id: 'div_'+ id });
    $('<input />', {
        type: 'checkbox',
        id: 'cb' + id,
        value: name
    }).prop('checked', status).on('change', function () {
        data.status = $(this).prop('checked');
    }).appendTo(div); /* set checkbox status and monitor changes */

    $('<label />', {
        'for': 'cb' + id,
        'div': 'div_' + id,
        text: name
    }).appendTo(div);

    var $editCheckBox = $('<p />', {
        class: 'editCheckBox',
        text: 'Edit'
    }).appendTo(div);

    div.appendTo(container);

    container.data('checkboxes').push(data);
}

    $('#divboxs').on('click', '.editCheckBox', function () {
    var text = $(this).parents(".allcheckbox").find("label").text();
  var id=$(this).parents(".allcheckbox").find("label").attr('div');
    var input = $('<input id="attribute" value="' + text + '" />');

    $('#'+id).html('').append(input);
    input.select();

    input.blur(function () {
        var text = $('#attribute').val();
        $('#attribute').parent().text(text);
        $('#attribute').remove();
    });
});    

});

如何在JQuery中访问CheckBox的ID？

2 个答案: