勾选/取消勾选复选框时禁用输入
问题描述：
我有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;
}
}
答
我在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"/>
答
下面的代码是为你解决问题。
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>
`
答
我测试这个上的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 11:44:36
您的代码在我的本地浏览器中表现良好。我认为可能是JSFiddle兼容性有问题。 – 2014-09-20 12:43:21
是的，可能是。 – Akshay 2014-09-20 12:51:34