Question

我在构建的复选框代码中遇到了一些问题。我正在启动一个关于更改的函数然后我使用if语句，但即使if语句正在执行其工作，它仍将启动该函数多次点击它。所以我们有一个IF语句，如果我选择它10次，它会给我5个警报我尝试过one（）函数，但它不是一个解决方案。

checkbox = $("#checkbox").attr('value');
$('#del').prop('disabled', true);
$("#checkbox").change(function () {
    if (this.checked) {

        $('#del').prop('disabled', false);
        $("#del").one("click", function () {
            var id = checkbox;
            alert("Checkbox selected & clicked del");

        }); //end del click
    } //end if
    else {
        $('#del').prop('disabled', true);
    } //end if
}); //end checkbox click

Answer 1

您的代码

＆＃13;

var checkbox = $("#checkbox").attr('value');
$('#del').prop('disabled', true);
$("#checkbox").change(function () {
    if (this.checked) {
        $(function () {
            $('#del').prop('disabled', false);
            $("#del").one("click", function () {
                var id = checkbox;
                console.log("Checkbox selected & clicked del");
            }); //end inside function.
        }); //end del clickdel click
    } //end if
    else {
        $('#del').prop('disabled', true);
    } //end if
}); //end checkbox click

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox">Checkbox
<button id="del">Delete</button>

＆＃13;

@tushar建议的代码

＆＃13;

var checkbox = $("#checkbox").attr('value');
$('#del').prop('disabled', true);
$("#checkbox").change(function() {
  $('#del').prop('disabled', !this.checked);
});

$("#del").one("click", function() {
  console.log("Checkbox selected & clicked del");
}); //end inside function.

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox">Checkbox
<button id="del">Delete</button>

＆＃13;

如果您注意到，我已移动，请点击外面的绑定。这是因为，当条件成立时，新事件被绑定，因此触发了多个警报。

Answer 2

您可以使用取消绑定功能，如下所示

var checkbox = $("#checkbox").attr('value');
$('#del').prop('disabled', true);
$("#checkbox").change(function () {
if (this.checked) {
    $('#del').prop('disabled', false);
    $("#del").unbind('click');   //unbind click event
    $("#del").click(function () {
        var id = checkbox;
        alert("Checkbox selected & clicked del");

    }); //end del click
} //end if
else {
    $('#del').prop('disabled', true);
} //end if
});

Answer 3

所以你需要像这样的somwething：

checkbox = $("#checkbox").attr('value');
$('#del').prop('disabled', true);

$("#checkbox").change(function(){ // this will enable/disable del button
    if(this.checked){
      $('#del').prop('disabled', false);
    } else {
      $(this).prop('disabled', true);
    }
 });


 $("#del").on( "click", function(){ // this will add click event to del button but lonly once
        var id    = checkbox;
        alert("Checkbox selected & clicked del");

        }); //end del click

简而言之：你需要分担责任：

第一个块将启用/禁用del按钮。
第二个区块将在onclick按钮上执行del。

Javascript复选框问题

3 个答案: