[英]Disable input on check/uncheck of checkbox
我有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;
}
}
我在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"/>
以下代码是为您解决的问题。
在这里摆弄-完美的工作 -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(){ 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"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.