只有在未选中复选框时才允许触发事件

Only allow to trigger event if checkbox is not checked

本文关键字：许触发 事件 复选框      更新时间：2023-09-26

我有一个带有复选框的表，当用户单击复选框时，一些内容被复制到div中，因此用户知道他选择了什么。

但是，如果我取消选中并再次选中，那么它将再次复制到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);
    }

生成的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>

更新1:更明确的解释:

我有一个带有复选框的表，当选择一行时，作业代码和作业名称被复制到名为results的div中。在该div中，我创建了一个锚标记来删除div本身。当删除选中的作业链接被单击时，我应该能够再次从表中添加它，当再次单击复选框。但是，如果所选的作业已经在div结果上，我应该无法再次添加它。在点击动态创建的链接时删除div

为什么不直接使用checked属性而不是取消绑定事件

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

或

为了更简洁的方法，如果您希望事件在页面加载的整个生命周期中只触发一次，那么只需取消绑定事件

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

编辑

如果上面的代码没有帮助，这应该工作

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

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

不要这样做。我会怎么做。在每次单击复选框时，我将再次获得选中复选框的列表并将其显示在resultdiv中。

在您的情况下，您是在每次点击追加DIV。如果我多次检查，就会导致重复。

如果你想坚持这种模式，那么当你选中复选框时，你必须从ResultDiv中删除条目。

如果您有任何疑问或困惑，请告诉我

相关文章：