Проблемы при удалении флажка из диалогового окна и его открытие при установке флажка не удаляется

Question

Когда я добавляю карту в список входящих сообщений, можно дважды щелкнуть по карте, чтобы открыть модальный диалог. В диалоговом окне можно добавить некоторые флажки динамически и удалить/удалить их, нажав на изображение TRASH.

Проблема заключается в том, что я могу создать 3 флажка, а затем удалить или удалить один из этих флажков. После этого я хочу сохранить данные и нажать кнопку сохранения. Диалоговое окно закрывается. Когда я дважды нажимаю на одну и ту же карточку, чтобы открыть диалог, я снял флажок.

Может ли кто-нибудь помочь мне исправить это?

Live Demo

HTML:

<!--Wrapper div--> 
<div id="wrapper"> 
    <!--Inbox list and button to add a card--> 
    <div id="inboxList" class="cellContainer"> 
     <p style="display: inline">Inbox</p> 
     <!--Button to add a Card--> 
     <input type="button" id="AddCardBtn" value="+ Add a Card..." /> 
     <hr class="fancy-line" /> 
     <br/> 
     <!--Card div--> 
     <div id="userAddedCard"> 
      <br/> 
      <div></div> 
     </div> 
    </div> 
</div> 
<!--Modal Dialog--> 
<div id="modalDialog"> 
    <form> 

     <input type="button" id="Savebtn" value="Save" /> 
     <br /> 
     <br/> 
     <label>Add checkBox</label> 
     <br /> 
     <br /> 
     <input type="text" id="checkBoxName" /> 
     <input type="button" id="btnSaveCheckBox" value="_Ok" /> 
     <br /> 
    </form> 
</div> 

Jquery:

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

    }); 

    // 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; 

    }); 

    $("#Savebtn").on("click", function() { 
     /* Copy checkbox data to card */ 
     $currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes')); 

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

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

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

     var container = $('#modalDialog'); 
     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); 

     $('<img />', { "src": "/Pages/Images/trashDialog.png", "class": "removeCheckBoxDialog" }).appendTo(div); 

     div.appendTo(container); 

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

    // Remove dynamically checkBoxes 
    $('#modalDialog').on('click', '.removeCheckBoxDialog', function (e) { 
     $('#' + $(this).prev().attr('for')).remove(); 
     $(this).next('br').remove(); 
     $(this).prev().remove(); 
     $(this).remove(); 

    }); 
}); 

Answer 1

Игнорировать мой предыдущий пост здесь является рабочей версией: http://jsfiddle.net/62QY8/117/

Пройдите через код, чтобы увидеть изменения, но Херес Бигги:

$('#modalDialog').data("checkboxes").splice(theIndex, 1); 

Пронумеруйте массив данных, чтобы найти индекс, который совпадает с тем, который вы удаляете.

Answer 2

Ваше хранение флажков с помощью .data(), а затем удалить их со страницы, но при нажатии modal- в диалоговом окне вы снова получите доступ к .data(). Вы должны также удалить элемент из данных см .removeData()