I created a toggle button using checkbox and tried to apply the logic below:

1] If user clicks on toggle switch id="accountability", one modal will appear and ask for some user input and when user enter those details then only that toggle will get checked

2] If User doesn't provide input then toggle should remain unchecked

3] if toggle is already checked and user click on it, it must unchecked.

But the problem is toggle button is getting checked whenever I click on it and then the modal come. one solution is to uncheck every time whenever point 2 is not fulfilled

Is there any other way to do that.

HTML

<div class="toggle">
    <label class="switch">
        <input type="checkbox" id="accountability">
        <span class="slider round"></span>
    </label>
</div>

Js

chrome.storage.local.get("isAccountabilityPatner", function (val) {
  if (val.isAccountabilityPatner) $("#accountability").prop('checked', true);
});

$("#accountability").on("change", function () {
  let ischk1 = $(this).is(":checked");
  if(ischk1){
    $(".accountabilty_popup").show();
  } else {
    chrome.storage.local.set({ "isAccountabilityPatner" : false });
  }
});

$("#accountabilitySubmit").click(() => {
  $("#accountability").prop('checked', false);
  let email1 = $("#accountabilityMail").val();
  let email2 = $("#accountabilityChkMail").val();
  let regex = new RegExp('[a-z0-9]+@[a-z]+\.[a-z]{2,3}');
  if(!regex.test(email1) || !regex.test(email2)){
    alert("Enter valid Eamil address");
  }
  else if(email1 != email2){
    alert("Both Email should be same");
  }
  else{
    chrome.storage.local.set({ "isAccountabilityPatner" : true });
  }
});