根据输入启用文本框

Enable textbox based on input

本文关键字：文本 启用 输入      更新时间：2024-03-30

我有两组文本框（1,2,3,4）和（a，b，c，d，e，f）。所有这些都是数字输入

我使用javascript在onload中禁用了6个文本框（a、b、c、d、e、f），并且运行良好。

但我想在文本框（3）中输入值>0后启用6个文本框

我尝试使用onChange，但它不起作用。

<html>
<script type="text/javascript">
window.onload = function () { 
var td2 = document.getElementsByName('A1ab1')[0]; 
td2.disabled = true;  
var td2 = document.getElementsByName('A1ab2')[0]; 
td2.disabled = true;
var td3 = document.getElementsByName('A1ab3')[0]; 
td3.disabled = true;
var td4 = document.getElementsByName('A1ab4')[0]; 
td4.disabled = true;
var td5 = document.getElementsByName('A1ab5')[0]; 
td5.disabled = true;
var td6 = document.getElementsByName('A1ab6')[0]; 
td6.disabled = true;
var td7 = document.getElementsByName('A1a3')[0];
td7.onChange = function(){
var x = document.getElementsByName('A1a3')[0].value;
    if(x > 0){
                td1.disabled = false;
                td2.disabled = false;
                td3.disabled = false;
                td4.disabled = false;
                td5.disabled = false;
                td6.disabled = false;                    
    }       
}   
}
</script>
<body>
<table border="0" class="NumericTable" cellspacing="0" cellpadding="0">
<tr class="r1"><td class="item"><span class="OptionFont">1</span></td><td class="text"><input type=text class=text name="A1a1" value="" size=9 maxlength=9 style="text-align:right" onkeyup="{showTotalA1a(); }"   onkeypress="return checkNumericValue(event)"  onBlur="Javascript:onBlurUpdate(this);"  /></td></tr>
<tr class="r2"><td class="item"><span class="OptionFont">2</span></td><td class="text"><input type=text class=text name="A1a2" value="" size=9 maxlength=9 style="text-align:right" onkeyup="{showTotalA1a(); }"   onkeypress="return checkNumericValue(event)"  onBlur="Javascript:onBlurUpdate(this);"  /></td></tr>
<tr class="r1"><td class="item"><span class="OptionFont">3</span></td><td class="text"><input type=text class=text name="A1a3" value="" size=9 maxlength=9 style="text-align:right" onkeyup="{showTotalA1a(); }"   onkeypress="return checkNumericValue(event)"  onBlur="Javascript:onBlurUpdate(this);"  /></td></tr>
<tr class="r2"><td class="item"><span class="OptionFont">4</span></td><td class="text"><input type=text class=text name="A1a4" value="" size=9 maxlength=9 style="text-align:right" onkeyup="{showTotalA1a(); }"   onkeypress="return checkNumericValue(event)"  onBlur="Javascript:onBlurUpdate(this);"  /></td></tr>
</table>
<br>
<table border="0" class="NumericTable" cellspacing="0" cellpadding="0">
<tr class="r1"><td class="item"><span class="OptionFont">a</span></td><td class="text"><input type=text class=text name="A1ab1" value="" size=9 maxlength=9 style="text-align:right" onkeyup="{showTotalA1ab(); }"   onkeypress="return checkNumericValue(event)"  onBlur="Javascript:onBlurUpdate(this);"  /></td></tr>
<tr class="r2"><td class="item"><span class="OptionFont">b</span></td><td class="text"><input type=text class=text name="A1ab2" value="" size=9 maxlength=9 style="text-align:right" onkeyup="{showTotalA1ab(); }"   onkeypress="return checkNumericValue(event)"  onBlur="Javascript:onBlurUpdate(this);"  /></td></tr>
<tr class="r1"><td class="item"><span class="OptionFont">c</span></td><td class="text"><input type=text class=text name="A1ab3" value="" size=9 maxlength=9 style="text-align:right" onkeyup="{showTotalA1ab(); }"   onkeypress="return checkNumericValue(event)"  onBlur="Javascript:onBlurUpdate(this);"  /></td></tr>
<tr class="r2"><td class="item"><span class="OptionFont">d</span></td><td class="text"><input type=text class=text name="A1ab4" value="" size=9 maxlength=9 style="text-align:right" onkeyup="{showTotalA1ab(); }"   onkeypress="return checkNumericValue(event)"  onBlur="Javascript:onBlurUpdate(this);"  /></td></tr>
<tr class="r1"><td class="item"><span class="OptionFont">e</span></td><td class="text"><input type=text class=text name="A1ab5" value="" size=9 maxlength=9 style="text-align:right" onkeyup="{showTotalA1ab(); }"   onkeypress="return checkNumericValue(event)"  onBlur="Javascript:onBlurUpdate(this);"  /></td></tr>
<tr class="r2"><td class="item"><span class="OptionFont">f</span></td><td class="text"><input type=text class=text name="A1ab6" value="" size=9 maxlength=9 style="text-align:right" onkeyup="{showTotalA1ab(); }"   onkeypress="return checkNumericValue(event)"  onBlur="Javascript:onBlurUpdate(this);"  /></td></tr>
</table>
</body>
</html>

谢谢！

看看这个：

jQuery('#some_text_box').on('input', function() {
   // do your stuff
});

jsFiddle演示

这应该行得通。

您还没有定义变量"td1"。强烈建议使用浏览器的javascript控制台来调试这样的东西。在执行onChange时，它应该会产生一个错误。

如果您不想使用JQuery，请尝试使用.onkeydown而不是.ochange.

此外，您可能需要解析文本框中的int值：

var x = parseInt(document.getElementsByName('A1a3')[0].value);
相关文章：