Add And Remove Checkbox Events Dynamically Depending On Some Business Logic?

Scenario: I have a results table with a checkbox, when the checkbox is checked, the content of the row(actually 2 columns concateneted only, are copied to a new div, with the job c

Solution 1:

Firstly I suggest some changes to your HTML. Separate out the styles from your DOM and place them in classes.

This makes sure there is separation of concerns

HTML

<div>
    <div class="divMain">
        <div>
            <table cellspacing="0" cellpadding="4" 
                     id="ctl00_PlaceHolderMain_myGrid" class="table">
                <tr class="rowHead">
                    <th scope="col">&nbsp;</th>
                    <th scope="col">JobCode</th>
                    <th scope="col">JobName</th>
                    <th scope="col">JobPartner</th>
                    <th scope="col">JobManager</th>
                    <th scope="col">ClientName</th>
                </tr>
                <tr class="row">
                    <td>
                        <input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1" 
                           type="checkbox" 
                          name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1"
                          data-flag="false" />
                    </td>
                    <td>column1</td>
                    <td>column2</td>
                    <td>column3</td>
                    <td>column4</td>
                    <td>column5</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="m0 selected"> 
        <span>Selected :</span>
        <div id="ResultsDiv" class="m0"></div>
    </div>

CSS

.divMain{
    height: 300px;
    overflow: auto;
    float: left
}

.table{
    color:#333333;
    width:100%;
    border-collapse:collapse;
}

.rowHead{    
    color:White;
    background-color:#5D7B9D;
    font-weight:bold;
}

.row{
 color:#333333;
 background-color:#F7F6F3;   
}

.m0{
     margin-top: 0px;   
}

.selected{
    margin-left: 10px;
    float: left
}

Javascript

$("#ctl00_PlaceHolderMain_myGrid input").change(function () {
    // Next cache your selector
    // so that you need not crawl the DOM multiple times
    var $this = $(this),
        $row = $this.closest('.row'),
        currFlag = Boolean($this.data('flag'));

    // As there might be multiple jobs , a single flag variable  
    // will not work. So you can set a data-flag attribute on the 
    // input that stores the current value
    if (currFlag === false && this.checked) {
        // Set the corresponding flag to true
        $this.data('flag', true);
        var jobCode = $row.find("td:eq(2)").text(),
            jobName = $row.find("td:eq(1)").text(),
            displayvalue = jobCode.toUpperCase() + " - " 
                         + jobName.toUpperCase(),
            inputId =  $this.attr('id')
        // Pass the input name too as you need to set the value of
        // the corresponding flag value again as you can add it multiple times         
        AddSelectedJob(jobCode, displayvalue, inputId);
        FillSelectedJobs();
    }
});

//Add selected job in the results div
function AddSelectedJob(id, display, inputId) {
    //create a div for every selected job
    // Use the inputId to save it as a data-id attribute  
    // on anchor so that you can set the value of the flag after 
    // removing it
    var html = '<div class="selectedjobs" id=' + id + '>' + display ;
    html += '<a href="javascript" data-id="'+ inputId 
                                 +'">Remove selected job</a></div>';                   
    $('[id$=ResultsDiv]').append(html);
}

// Remove the inline click event for the anchor and delgate it to the 
// static parent container
$('[id$=ResultsDiv]').on('click', 'a', function(e) {
    var $this = $(this),
        $currentCheckbox = $this.data('id');
    // Set the flag value of the input back to false

    $('#'+ $currentCheckbox).data('flag', false);
    e.preventDefault(); // prevent the default action of the anchor
    $this.closest('.selectedjobs').remove();
});


function FillSelectedJobs() {
    //save values into the hidden field
    var selectedJobs = $("[id$=ResultsDiv]").find("[class$='selectedjobs']");
    var returnvalue = "";
    for (var i = 0; i < selectedJobs.length; i++)
        returnvalue += selectedJobs[i].id + ";";
    $("[id$=HiddenClientCode]").val(returnvalue);
}

Check Fiddle