Disable input on check/uncheck of checkbox

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;
    }       
}

Your code does well in my native browser. I think may be there is something wrong with JSFiddle compatibility. — Todd Mark
– Todd Mark, Commented Sep 20, 2014 at 12:43

Afsa · Accepted Answer · 2014-09-20 12:09:39Z

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"/>

answered Sep 20, 2014 at 12:09

Afsa

2,1451 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Akshay Over a year ago

Sorry I forgot to mention that my code is in php, so addEventListener won't work. Right?

Afsa Over a year ago

@Akshay I'm using addEventListener on my PHP page and it is working fine.

Afsa Over a year ago

@Akshay If you do not want to use eventlisteners you could change your code's onchange and remove the eventlisteners.

prog1011 · Accepted Answer · 2014-09-20 12:09:44Z

1

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>

`

answered Sep 20, 2014 at 12:09

prog1011

3,4856 gold badges34 silver badges59 bronze badges

4 Comments

Afsa Over a year ago

You should not be using jQuery in your answer if the question isn't tagged with jQuery.

prog1011 Over a year ago

@Afsa - What is wrong if user adapt new technology or technology up-gradation ?

Akshay Over a year ago

Hey thanks by the way, it's also working. I don't mind implementing it with jquery.

Afsa Over a year ago

@user Not all websites can implement jQuery for different reasons. It is nothing wrong to adapt to new tech. However, here on SO the general rule is

"Unless a tag for a framework or library is also included, a pure JavaScript answer is expected for questions with the javascript tag."

Todd Mark · Accepted Answer · 2014-09-20 12:55:03Z

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"/>

Collectives™ on Stack Overflow

Disable input on check/uncheck of checkbox

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related