showing Confirm message when unchecking a checkbox in javascript

Question

I want a message that reads "are you sure?" to display when the user tries to uncheck a checkbox. If they choose something like "yes", then uncheck it. If they choose "no", then leave as is. I'm fairly new to JavaScript and my attempt at this has prompted me with the error "JavaScript runtime error: Unable to get property 'checked' of undefined or null reference". Here is my Checkbox code:

<div id="ChkBox">
    <input style="margin: 5px; " type="checkbox" name="chkIsActive" onchange="Areyousure('ChkBox')" value="@Model.Pharmacy.IsActive" @(Model.Pharmacy.IsActive =="True" ? "checked=\"checked\"" : "") /> Is Active
</div>
<script>
    Areyousure();
</script>

and here is the function:

function Areyousure(id) {
    if (document.getElementById(id).checked == true) {
        return false;
    } else {
        var box = confirm("Are you sure you want to Uncheck this?");
        if (box == true)
            return true;
        else
            document.getElementById(id).checked = true;
    }
}

What can i do to fix this? Thanks in Advance!

Answer 1

You could consider passing in the element itself to avoid any issues with targeting it based on its id attribute using :

onchange='Areyousure(this);'

And then adjust your function accordingly to handle determine if the checked attribute should persist through the change or not :

function Areyousure(element) {
    // If it is checked now, let it be
    if (element.checked) {
        return false;
    // Otherwise prompt the user
    } else {
        // Prompt the user to make sure
        if (confirm("Are you sure you want to Uncheck this?")){
            // The user confirmed it, so uncheck it
            return true;
        }else{
            // Otherwise, keep it checked
            element.checked = true;
        } 
    }
}

Example

 <div id="ChkBox"> <input style="margin: 5px; " type="checkbox" name="chkIsActive" onchange="Areyousure(this)" value="example" checked />Is Active </div> <script> function Areyousure(element) { // If it is checked now, let it be if (element.checked) { return false; // Otherwise prompt the user } else { // Prompt the user to make sure if (confirm("Are you sure you want to Uncheck this?")){ // The user confirmed it, so uncheck it return true; }else{ // Otherwise, keep it checked element.checked = true; } } } </script> 

Answer 2

Your method expects an ID but none is passed in:

Add to your input:

<input id="chkIsActive"

And change the script to call method to:

<script>
    Areyousure("chkIsActive");
</script>

Answer 3

Since you are finding the element by id (which is not defined), so javascript will not be able to find the html element.

Instead you can edit your input tag to something like this;

<input style="margin: 5px; " type="checkbox" name="chkIsActive" onchange="Areyousure()" value="@Model.Pharmacy.IsActive" @(Model.Pharmacy.IsActive =="True" ? "checked=\"checked\"" : "") />

And then instead of getting the element by Id, you can get it by name using:

document.getElementByName("chkIsActive");

You also need to change the function as no parameter will be passed to the function now. Cheers :)