个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个表格。在禁用的提交按钮中，我做了以下功能，当余额值大于10时，它将删除其禁用功能。我的脚本不工作。当余额大于 10 时，有没有办法取消提交按钮的禁用功能？
<script >
function startCalc(){
interval = setInterval("calc()",1);
}
function calc(){
one = document.add_form.obalance.value;
two = document.add_form.debit.value;
document.add_form.balance.value = (one * 1) - (two * 1);
}
function stopCalc(){
clearInterval(interval);
}
</script>
我的 html 表单:
<html>
<form name="add_form" action="ebill.php" method="post" >
<input type="text" name="obalance" id="obal" value="" onFocus="startCalc();"
onBlur="stopCalc();" >
<input type="text" name="debit" id="totl" value="" onFocus="startCalc();"
onBlur="stopCalc();" />
<input type="text" name="balance" id="totl" value="" />
<input type="submit" id="submit" name="submit" disabled="disabled" />
</html>
删除提交按钮禁用属性的脚本:
<script >
setInterval(function () {
if ($('#balance').val() >= 10){
$(":submit").removeAttr("disabled");
}
else{
$(":submit").attr("disabled", "disabled");
alert('Your Balance is less than 10');
}
}, 1);
</script>
最佳答案
(代码本身的注释——您还会在代码下方找到一些“最佳实践建议”，以避免很多麻烦；))
function startCalc(){
interval = setInterval("calc()",1);
}
function calc(){
one = document.add_form.obalance.value;
two = document.add_form.debit.value;
document.add_form.balance.value = (one * 1) - (two * 1);
}
function stopCalc(){
clearInterval(interval);
}
setInterval(function () {
/*************************************
v----------- ID error (fixed) */
if ($('#tot2').val() >= 10){
$(":submit").removeAttr("disabled");
}
else{
$(":submit").attr("disabled", "disabled");
// alert('Your Balance is less than 10');
}
}, 10); // 1 is too much?input#submit[disabled] {
background-color: red; color: white; opacity:.2;
}
input#submit:not(disabled) {
background-color: green; color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
<input type="text" name="obalance" id="obal" value="" onFocus="startCalc();"
onBlur="stopCalc();" >
<input type="text" name="debit" id="tot1" value="" onFocus="startCalc();" onBlur="stopCalc();" />
<!-- ID error (fixed) -------------^ -->
<input type="text" name="balance" id="tot2" value="" /> <!--
<!-- ID error (fixed) -------------^ -->
<input type="submit" id="submit" name="submit" disabled="disabled" />顺便说一句，你是否使用jQuery。对一堆代码使用 jQuery 而对另一个代码使用纯 DOM 确实很容易出错。
例如，在您上面的代码中，document.add_form.balance 和 $('#tot2') 处理相同的 DOM 元素，但它们的名称完全不同，没有理由。
难以阅读，难以调试，容易出错。
如果您的代码在文档准备好后工作，例如您应该将您的字段放在具有不言自明名称的变量中:
let balanceField /* or whatever name you want */ = $('#balance') ;
let debitField = $('#debit') ;
let totalField = $('#total') ;
然后，在您的代码中，您使用这些变量而不是硬值:
let one = balanceField.val() || 0 ;
let two = debitField.val() || 0 ;
totalField.val( one + two ) ;
或者，更短、仍然可读且富有表现力的(但前提是您不再需要 one 和 two 值):
totalField.val( (balanceField.val()||0) + (debitField.val()||0) ) ;
还有:
if ( debitField.val() > 9 ) { ... }
关于javascript - 条件满足时移除提交按钮的禁用功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46999967/
24
4
0
我有以下代码在加载 View 时添加观察者。 - (void)viewDidLoad { [super viewDidLoad]; [[NSNotificationCenter def
我正在做一个 iPad 项目，我必须一个接一个地流畅地播放短视频文件。为了播放我正在使用的视频 MPMoviePlayerController .我面临的问题是当我打电话时 [self.moviePl
在某些浏览器中，例如 Safari 9，以下 Bootstrap 网格在 row 元素的两侧留下 1px 的间隙。这是为什么？ .a {background-color:#eee} .b {backg
我不明白为什么我的 npm 会这样，而且我是 react-native 的新手。 这是我在 Windows 10 上的“错误”的描述: 我可以使用 react-native 命令来运行 android
我是一名优秀的程序员,十分优秀！