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><divclass="divMain"><div><tablecellspacing="0"cellpadding="4"id="ctl00_PlaceHolderMain_myGrid"class="table"><trclass="rowHead"><thscope="col">&nbsp;</th><thscope="col">JobCode</th><thscope="col">JobName</th><thscope="col">JobPartner</th><thscope="col">JobManager</th><thscope="col">ClientName</th></tr><trclass="row"><td><inputid="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><divclass="m0 selected"><span>Selected :</span><divid="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 timesvar $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 valueif (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 itvar 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 fieldvar 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