禁用復選框的選中/取消選中輸入

Question

我有2個復選框和2個用於郵件和電話的輸入標簽。

我的要求是，我想在檢查郵件時禁用電話輸入，反之亦然。 但是在選中兩個復選框時，我要保持兩個輸入都處於啟用狀態。

這是我的小提琴 。 這是沒有用的代碼，因為我以前從未使用過。 但是它正在我的本地主機上工作。

問題是，當我同時選中兩個框並多次取消選中時，它無法正常工作。

的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 ，並對邏輯進行了一些改動。 腳本首先檢查兩個框是否都被選中。 正確，然后同時啟用兩個字段。 如果沒有，請禁用正確的字段。

 (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

以下代碼是為您解決的問題。

在這里擺弄-完美的工作 -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編輯器中。 有用！
您的代碼沒有錯誤。 也許是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"/>