Question

我有2个复选框和2个输入标签，用于邮件和电话。

我的要求是，我想在检查邮件时禁用手机的输入，反之亦然。但在检查两个复选框时，我想保持两个输入都已启用。

这是我的fiddle。这是因为我之前从未使用它而在小提琴上工作的代码。但它正在我的本地主机上工作。

问题是，当我检查两个方框然后多次检查 - 取消选中时，它运行不正常。

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

脚本

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

我在JS中添加了eventlisteners并稍微修改了逻辑。脚本拳检查是否检查了两个框。这是真的，然后启用两个字段。如果不禁用右侧字段。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

以下代码是您发布的解决方案。

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

我在JSFiddle上测试这个，我觉得这不行！但是在SOF编辑器中。有用！
你的代码没有bug。也许这是JSFiddle缺陷。

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

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

3 个答案: