如果未选中复选框，则仅允许触发事件

Question

I have a table with a checkbox, when the user clicks on the checkbox, something is copied into a div, so the user knows what he has selected.

However, if I uncheck and check again, then its copied again to the div.

           //On every checkbow that is clicked
    var flag = false;
    $("#ctl00_PlaceHolderMain_myGrid input").change(function () {
        if (this.checked && flag === false) {
            var jobCode = $(this).parent().parent().parent().find("td:eq(2)").text()
            var jobName = $(this).parent().parent().parent().find("td:eq(1)").text()
            var displayvalue = jobCode.toUpperCase() + " - " + jobName.toUpperCase();
            //var removeDiv = $("#" + clientCode);

            //removeDiv.remove();         

            AddSelectedJob(jobCode, displayvalue);
            FillSelectedJobs();            
        }
    });

//Add selected job in the results div
function AddSelectedJob(id, display) {
    //create a div for every selected job
    $("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="javascript:;" onclick="removeSelectedJob(this)">Remove selected job</a></div>');
}

//Removes the selected job from the resutls div
function removeSelectedJob(el) {
    $(el).parent().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);

    }

This is the generated html

<div>
            <div style="height: 300px; overflow: auto; float: left">
                <div>
        <table cellspacing="0" cellpadding="4" id="ctl00_PlaceHolderMain_myGrid" style="color:#333333;width:100%;border-collapse:collapse;">
            <tr style="color:White;background-color:#5D7B9D;font-weight:bold;">
                <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 style="color:#333333;background-color:#F7F6F3;">
                <td>
                                <input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1" type="checkbox" name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1" />
                            </td><td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td>
            </tr>
        </table>
    </div>
            </div>
            <div style="margin-top: 0px; margin-left: 10px; float: left">
                <span>Selected :</span>
                <div id="ResultsDiv" style="margin-top: 0px">
                </div>
            </div>

Update 1: A more clear explanation:

I have a table with checkboxes, when a row is selected the job code and job name is copied to a div called results. In that div, I created an anchor tag to remove the div itselft. When the remove selected job link is clicked, I should be able to add it again from the table when click the checkbox again. However if the selected job is already on the div results, I should not be able to add it again. Please see question here also: Remove div on the click of a link that was created dynamically

Answer 1

Why not just use the checked attribute instead of unbinding the event

var flag = false;
$("#ctl00_PlaceHolderMain_myGrid input").change(function () {
    if(this.checked && flag === false) {
         flag = true;  // set it to true so that it does 
                       // fire this block again
         // do something
    }
    else {
        // do something else
    }
});

OR

For a cleaner approach, if you want the event to fire only once for the life time of the page load , then just unbind the event

$(this).off('change')   // If using .on

EDIT

If the above code does not help this should work

if (this.checked) {
   $(this).unbind('change');   // or //   $(this).off('change');
   AddSelectedJob(clientCode, displayvalue);
   FillSelectedJobs();
}

Answer 2

在AddSelectedJob之前，您可以检查特定div的内容是否为空。

Answer 3

Do not do in this way. What I would do. On every checkbox click, I will get the list of checked checkbox again and display it in a result div.

In your case you are appending DIV on every click. Which will cause duplication if I checked multiple times.

Still if you want to stick to this pattern then you have to remove entry from the ResultDiv when you unchecked the checked checkbox.

Please let me know if you have any query or confusion.