Question

我有以下表格和javascript：

<script type="text/javascript">
function toggleButton(ref,bttnID){
  document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true);
}
</script>

<form action="" method="post" id="subscribe" name="subscribe">
<label>NAME:</label>
<input type="text" name="name" class="subName" onkeyup="toggleButton(this,'bttnsubmit');">
<label>EMAIL:</label>
<input type="text" name="email" class="subEmail" id="sub_email">
<input type="button" name="button" value="Subscribe" disabled='disabled' id='bttnsubmit'/>
</form>

当我第一次加载我的网站时，SUBMIT按钮被禁用，因为文本字段中没有文本。现在，我想在文本字段中放置一些文本后启用按钮。

请帮忙吗？

Answer 1

问题中的现有代码工作正常，但在删除文本时会被禁用。其他人可能会想到这一点，但您可以进行一些小的更改，以便永久删除它而不需要jquery（jquery不在标签中）

function toggleButton(ref,bttnID){
  document.getElementById(bttnID).removeAttribute("disabled");
}

并将onkeyup="toggleButton(this,'bttnsubmit')添加到需要启用按钮的任何字段

Answer 2

使用jQuery：

$(document).ready(function() {
     $('#bttnsubmit').attr('disabled','disabled');
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $('input[type="submit"]').removeAttr('disabled');
        }
     });
 });

来源：jQuery disable/enable submit button

Answer 3

添加完成该技巧的最终代码：

<script type="text/javascript">
$(document).ready(function() {
     $('#bttnsubmit').attr('disabled','disabled');
     $('#subEmail').keyup(function() {
        if($(this).val() != '') {
           $('#bttnsubmit').removeAttr('disabled');
        }
        else {
        $('#bttnsubmit').attr('disabled','disabled');
        }
     });
 });
</script>

在使用文本填充某些字段时启用提交按钮

3 个答案: