禁用复选框的选中/取消选中输入

Question

I have 2 checkboxes and 2 input tags for mail and phone.

My requirement is such that I want to disable the input of phone when I check mail and vice-versa. But on checking both the checkboxes I want to keep both the inputs enabled.

Here's my fiddle . This is the code which is not working on the fiddle as I've never used it before. But it is working on my localhost.

The problem is, it's not working well when I check both boxes and then check-unchek many times.

HTML

<input type="checkbox" id="check_email" name="check_email" onchange="disablePhone()" /> Email
<input type="checkbox" id="check_phone" name="check_phone" onchange="disableEmail()" /> Phone

Script

var chk_mail = 0;
var chk_phone = 0;
var unchk = 0;

function disablePhone()
{
    if(unchk == 1)
    {
        document.getElementById("ref_email").disabled = true;
        unchk = 0;
        //alert("disablePhone")
    }
    if(chk_mail == 0 && unchk == 0)
    {
        if(document.getElementById("check_email").checked == true)
        {
            document.getElementById("form-field-phone").disabled = true;
            chk_mail = 1;
        }
    }
    else if( chk_mail == 1 && unchk == 0)
    {
        document.getElementById("check_email").checked = false;
        document.getElementById("form-field-phone").disabled = false;
        chk_mail = 0;
    }
    if(chk_phone ==1 && chk_mail == 1)
    {
        document.getElementById("ref_email").disabled = false;
        document.getElementById("form-field-phone").disabled = false;
        chk_phone = 0;
        unchk = 1;
    }
}

function disableEmail()
{
    if(unchk == 1)
    {
        document.getElementById("form-field-phone").disabled = true;
        unchk = 0;
        //alert("disableEmail")
    }

    if(chk_phone == 0 && unchk == 0)
    {
        if(document.getElementById("check_phone").checked == true)
        {
            document.getElementById("ref_email").disabled = true;
            chk_phone = 1;
        }
    }
    else if(chk_phone == 1 && unchk == 0)
    {
        document.getElementById("check_phone").checked = false;
        document.getElementById("ref_email").disabled = false;
        chk_phone = 0;
    }
    if(chk_phone ==1 && chk_mail == 1)
    {
        document.getElementById("ref_email").disabled = false;
        document.getElementById("form-field-phone").disabled = false;
        chk_phone = 0;
        unchk = 1;
    }       
}

Answer 1

I added eventlisteners in the JS and altered the logics a bit. The script fist checks if both boxes are checked. It true, then make both fields enabled. If not disable the right field.

 (function() { document.getElementById('check_email').addEventListener('change', disableInput, false); document.getElementById('check_phone').addEventListener('change', disableInput, false); function disableInput() { var emailChecked = document.getElementById('check_email'); var phoneChecked = document.getElementById('check_phone'); var email = document.getElementById('ref_email'); var phone = document.getElementById('form-field-phone'); if(emailChecked.checked == phoneChecked.checked) { email.disabled = false; phone.disabled = false; } else if(emailChecked.checked) { phone.disabled = true; } else { email.disabled = true; } } })(); 

 <input type="checkbox" id="check_email" name="check_email" /> Email <input type="checkbox" id="check_phone" name="check_phone" /> Phone <br> <input type="email" id="ref_email" name="ref_email" placeholder="Email ID" /> <input type="text" id="form-field-phone" name="form-field-phone" placeholder="Phone"/> 

Answer 2

The below code is the solution for you issue .

fiddle here - Working perfect - JavaScript

`

<script type="text/javascript">
    $(document).ready(function () {
        $("#check_email").click(function () {
            call();
        });
        $("#check_phone").click(function () {
            call();
        });
        function call() {
            document.getElementById("form-field-phone").disabled = false;
            document.getElementById("ref_email").disabled = false;
            if ($("#check_email").is(':checked') && $("#check_phone").is(':checked')) {
                document.getElementById("form-field-phone").disabled = false;
                document.getElementById("ref_email").disabled = false;
            }
            else {
                if ($("#check_email").is(':checked')) {
                    document.getElementById("form-field-phone").disabled = true;
                    document.getElementById("ref_email").disabled = false;
                }
                if ($("#check_phone").is(':checked')) {
                    document.getElementById("form-field-phone").disabled = false;
                    document.getElementById("ref_email").disabled = true;
                }
            }
        }
    });
    </script>

`

Answer 3

I test this on JSFiddle and I find that isn't work! But In the SOF Editor. It works!
Your code haven't bug. Maybe it's JSFiddle defect.

 function checkDisable(){ var checkEmail = document.getElementById('check_email'); var checkPhone = document.getElementById('check_phone'); var inputEmail = document.getElementById('ref_email'); var inputPhone = document.getElementById('form-field-phone'); if(checkEmail.checked){ inputPhone.disabled = true; } if(checkPhone.checked){ inputEmail.disabled = true; } if(checkEmail.checked && checkPhone.checked){ inputEmail.disabled = false; inputPhone.disabled = false; } if(!checkEmail.checked && !checkPhone.checked){ inputEmail.disabled = false; inputPhone.disabled = false; } } 

 <input type="checkbox" id="check_email" name="check_email" onchange="checkDisable()" /> Email <input type="checkbox" id="check_phone" name="check_phone" onchange="checkDisable()" /> Phone <br> <input type="email" id="ref_email" name="ref_email" placeholder="Email ID" /> <input type="text" id="form-field-phone" name="form-field-phone" placeholder="Phone"/>