How to accses The ID of CheckBox in JQuery?

Question

I want to, when I double click the card the dialog pop up. Then it is possible to create dynamic checkBoxes. When creating the checkBoxes it is possible to edit the text, of each CheckBoxes. The problem comes if I have eg. created 3 checkboxes and want to edit one of them, all the others checkboxes get the same name as the one I want to edit. You can see the problem in the image below:

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

});

I think this is the part of the code that gives me problems: var input = $('<input id="attribute" value="' + text + '" />')

I think I should use the ID of CheckBox: id: 'cb' + id, instead of id="attribute". How to insert the id of checkBox at this place ?

Live Demo

Answer 1

Ok. So there are a few issues with your code.

The first being. You append the newly created input to all "allcheckbox" class elements

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

The second issue, is in that same line you are emptying that entire DIV. Which will create issues once you want to update the input and label with the new value.

So rather hide any elements you would not want to display, once the blur event is called, remove the new input, update the values then show the elements you previously hide.

Find an updated fiddle below: http://jsfiddle.net/62QY8/122/

Also, on a bit of a side note. "class" is a JavaScript reserved word. So rather use "classname". ie.

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

Answer 2

I am not so sure what exactly is being done here. But if the idea is to edit on checkbox at a time then please chek the following fiddle

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

});