仅当未选中的复选框被选中时触发事件

Question

我有这个 JavaScript 函数，我只想在未选中的框被选中并且我的获取请求 returns 为真时触发。发出警报时，hasCoPrimary 为真，但 if 语句从不触发。我假设这是因为复选框在 if 语句通过之后才注册为 'checked'？如何获得等待复选框更改被注册的函数，以便我可以在 if 语句中使用它？

$('#btn-isPrimary').on('change', function (e) {

    $.get('/Ingredient/CheckForCoPrimary/', { code: "@Model.Code", id: @Model.Id }, function (hasCoPrimary) {
        //Only shows modal if the item being made primary already has another ingredient with the same code marked as primary
        if ($(this).is(':checked') && hasCoPrimary === true) {
            
            $("#primary-modal").modal();
        }

    });  
});

编辑：将代码更改为此，但两者都不起作用。在进入 if 语句之前，我有一个警报告诉我 hasCoPrimary 是什么，它每次都是 True，所以那部分是正确的。

$('#btn-isPrimary').on('change', function (e) {
    var checkbox = $('#btn-isPrimary');
    $.get('/Ingredient/CheckForCoPrimary/', { code: "@Model.Code", id: @Model.Id }, function (hasCoPrimary) {
        alert(hasCoPrimary);
        //Only shows modal if the item being made primary already has another ingredient with the same code marked as primary
        if (checkbox.is(':checked') && hasCoPrimary === true) {
            
            $("#primary-modal").modal();
        }

    });  
});

我也试过这个

$('#btn-isPrimary').on('change', function (e) {
        var checkbox = $('#btn-isPrimary');
        $.get('/Ingredient/CheckForCoPrimary/', { code: "@Model.Code", id: @Model.Id }, function (hasCoPrimary) {
            alert(hasCoPrimary);
            //Only shows modal if the item being made primary already has another ingredient with the same code marked as primary
            if (e.currentTarget.checked && hasCoPrimary === true) {
                
                $("#primary-modal").modal();
            }

        });  
    });

Answer 1

问题是一旦进入 $.get 回调函数，$(this) 就不再是复选框 - 您需要在回调函数之前设置一个变量，或者更好的是，您可以使用 e.currentTarget.checked = 当您将 e 传递给更改函数时，e.currentTarget 是已更改的复选框

$('#btn-isPrimary').on('change', function(e) {
  $.get('/Ingredient/CheckForCoPrimary/', {
    code: "@Model.Code",
    id: @Model.Id
  }, function(hasCoPrimary) {
    //Only shows modal if the item being made primary already has another ingredient with the same code marked as primary
    if (e.currentTarget.checked && hasCoPrimary === true) {
      $("#primary-modal").modal();
    }
  });
});

但是，如果您只打算在复选框被选中时显示模式，那么我会将 if 语句的选中部分移到 $.get 之外，这样您就不会做出不必要的 ajax 来电：

$('#btn-isPrimary').on('change', function(e) {
  if (e.currentTarget.checked) {
    $.get('/Ingredient/CheckForCoPrimary/', {
      code: "@Model.Code",
      id: @Model.Id
    }, function(hasCoPrimary) {
      //Only shows modal if the item being made primary already has another ingredient with the same code marked as primary
      if (hasCoPrimary === true) {
        $("#primary-modal").modal();
      }
    });
  }
});

如果以上没有进入 if (hasCoPrimary === true)，您可能需要检查 hasCoPrimary 是布尔值还是字符串 - 如果它像您的 True 一样发出警报编辑，您可能需要尝试 if (hasCoPrimary === 'True')。另请注意 currentTarget

上的小 c

仅当未选中的复选框被选中时触发事件

Fire event only when an unchecked checkbox gets checked

javascript

jquery

asp.net-mvc