勾選/取消勾選複選框時禁用輸入

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

來源

2014-09-20 Akshay

走出聯事件聲明青睞！太老了！ – 2014-09-20 11:44:36

您的代碼在我的本地瀏覽器中表現良好。我認爲可能是JSFiddle兼容性有問題。 – 2014-09-20 12:43:21

是的，可能是。 – Akshay 2014-09-20 12:51:34

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

來源

2014-09-20 12:09:39 Afsa

對不起，我忘了提及我的代碼是在PHP中，所以addEventListener不起作用。對？ – Akshay 2014-09-20 12:20:52

@Akshay我在我的PHP頁面上使用'addEventListener'，它工作正常。 – Afsa 2014-09-20 12:27:09

@Akshay如果你不想使用'eventlisteners'，你可以改變你的代碼'onchange'並刪除'eventlisteners'。 – Afsa 2014-09-20 12:38:49

下面的代碼是爲你解決問題。

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>

來源

2014-09-20 12:09:44 prog1011

如果問題未使用jQuery進行標記，則不應在回答中使用jQuery。 – Afsa 2014-09-20 12:13:15

@Afsa - 如果用戶採用新技術或技術升級，會出現什麼問題？ – prog1011 2014-09-20 12:44:50

嘿，謝謝你的方式，它也在工作。我不介意用jQuery來實現它。 – Akshay 2014-09-20 12:47:07

我測試這個上的jsfiddle，我覺得是不行的！但在SOF編輯器中。有用！
你的代碼沒有錯誤。也許這是JSFiddle缺陷。

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

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

來源

2014-09-20 12:55:03

勾選/取消勾選複選框時禁用輸入

回答

相關問題