Question

（此文本框值是动态产生的）

如果文本框的值为100，它将启用“提交”按钮，但是在将值编辑为100而未更改后，此处启用了提交按钮。

<script>
    function manage(txt) {
    var bt = document.getElementById('btSubmit');
    if (txt.value != '100') {
        bt.disabled = true;
    }
    else {
        bt.disabled = false;
    }
    }    
</script>

Answer 1

这取决于浏览器。为确保其有效，请使用setAttribute并removeAttribute

var bt = document.getElementById('btSubmit');
bt.setAttribute("disabled","disabled");
bt.removeAttribute("disabled");

Answer 2

您能检查一下吗？

function manage(txt) {
  var bt = document.getElementById('btSubmit');
  if (txt.value != '100') {
    console.log('Disabled');
    bt.setAttribute("disabled", "true");
  } else {
    console.log('Enabled');
    bt.removeAttribute("disabled");
  }
}

<input type="text" id="txt" onkeyup="manage(this)" />
<input type="submit" id="btSubmit" disabled="true" />

Answer 3

由于您的示例不是MCVE，因此不能完全确定问题出在哪里，但是您可以在输入时使用"keyup"事件来监听对input元素所做的任何更改

此外，您的代码不必要地冗长：

/* ----- JavaScript ----- */
document.getElementById("txt").addEventListener("keyup", function () {
   /* Disable the button, if the value of the input is <> 100. */
   document.getElementById("btSubmit").disabled = (this.value != 100);
});

<!----- HTML ----->
<input type = "text" id = "txt"/>
<input type = "submit" id = "btSubmit" disabled/>

如果您更喜欢在HTML代码中使用内联JavaScript，则上述解决方案可以写为：

/* ----- JavaScript ----- */
function manage (element) {
   /* Disable the button, if the value of the input is <> 100. */
   document.getElementById("btSubmit").disabled = (element.value != 100);
}

<!----- HTML ----->
<input type = "text" id = "txt" onkeyup = "manage(this)"/>
<input type = "submit" id = "btSubmit" disabled/>

Answer 4

使用jQuery

<input id="myData" type="text" name="getData" />
<button id="button" >Click me</button>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script>
<script>
$(document).ready(function()
{
    $('#myData').keyup(function() {
        var data= $("#myData").val()
        if(data==100)
        {
             $("#button").prop("disabled",false);
        }
        else
        {
             $("#button").prop("disabled",true);
        }
     });
});
</script>

如何使用文本框值启用和禁用提交按钮

4 个答案: