Creé un botón de alternar usando la casilla de verificación e intenté aplicar la lógica a continuación:

1] Si el usuario hace clic en el interruptor de palanca id = "responsabilidad", aparecerá un modal y solicitará alguna entrada del usuario y cuando el usuario ingrese esos detalles, solo se verificará esa palanca

2] Si el usuario no proporciona una entrada, la alternancia debe permanecer sin marcar

3] si la alternancia ya está marcada y el usuario hace clic en ella, debe desmarcarse.

Pero el problema es que el botón de alternar se verifica cada vez que hago clic en él y luego aparece el modal. una solución es desmarcar cada vez que no se cumpla el punto 2

¿Hay alguna otra manera de hacer eso?

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]+@[az]+\.[az]{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 }); } });