Fire event only when an unchecked checkbox gets checked-CodePudding

I have this JavaScript function that I want to only fire if an unchecked box gets checked and my get request returns true. When alerting, hasCoPrimary is true but the if statement never fires. I assume this is because the checkbox doesn't register as 'checked' until after the if statement passes? How do I get the function to wait for the checkbox change to be registered so that I can use it in an if statement?

$('#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();
        }

    });  
});

EDIT: Changed code to this and neither still work. I have an alert that tells me what hasCoPrimary is before going into the if statement, and it is True everytime so that part is right.

$('#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();
        }

    });  
});

I also tried this

$('#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();
            }

        });  
    });

CodePudding user response：

The problem is that $(this) is no longer the checkbox once you are inside your $.get callback function - you would either need to set a variable before your callback function or better still, you can use e.currentTarget.checked = as you are passing e into your change function, e.currentTarget is the checkbox that has changed

$('#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();
    }
  });
});

However, if you only intend to show the modal if the checkbox is checked, then I would move the checked part of the if statement to outside the $.get so you are not making unnecessary ajax calls:

$('#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 the above doesn't get into the if (hasCoPrimary === true), you may want to check if hasCoPrimary is a bool or a string - if it's alerting as True as in your edit, you may need to try if (hasCoPrimary === 'True'). Also note the small c on currentTarget