Question

我有一个HTML表单，当输入值小于10时，禁用提交按钮。当输入值大于10时，按钮会改变颜色。

当我使用退格键或删除按钮删除输入值时出现问题，在刷新页面之前，提交按钮颜色不会更改为禁用按钮。

setInterval(function () {
  if ($('#tot2').val() >= 10){
    $("#submit").removeAttr("disabled");
    $("#submit").css({"background-color": "blue", "color": "white"});
  } else {
    $("#submit").attr("disabled", "disabled");
  }
}, 10);

<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="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

Answer 1

一旦值达到10，您就会更改颜色，但是您永远不会更改颜色。您可以将它们设置为空字符串（""）以在设置之前恢复原始颜色。（见jQuery - remove style added with .css() function）。

以下固定代码：

＆＃13;

setInterval(function () {
  if ($('#tot2').val() >= 10){
    $("#submit").removeAttr("disabled");
    $("#submit").css({"background-color": "blue", "color": "white"});
  } else {
    $("#submit").attr("disabled", "disabled");
    // Remove the custom colors we added.
    $('#submit').css({"background-color": "", "color": ""});
  }
}, 10);

＆＃13;

<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="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

＆＃13;

（请注意，正如其他人所指出的，监控input更改而不是使用计时器会更好。）

Answer 2

您可以使用解决方案

＆＃13;

$('#tot2').keyup(function(){
  if(parseInt($(this).val()) < 10 || $(this).val().length  === 0) {
    $('#submit')
      .attr('disabled', 'disabled')
      .removeClass('active');
  } else {
    $('#submit')
      .removeAttr('disabled')
      .addClass('active');
  }
});

＆＃13;

.active {
  background: black;
  color: white;
}

＆＃13;

<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="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

＆＃13;

Answer 3

尝试键盘事件。使用类进行样式设置并切换它。

 $("#tot2").on("keyup", function() {
    var elem = $(this);
    if (elem.val() >= 10) {
        $("#submit").removeAttr("disabled").addClass("active");
    } else {
        $("#submit").attr("disabled", "disabled").removeClass("active");
    }
});

CSS：

active {
        background-color: blue;
        color: white
    }

演示：http://jsfiddle.net/GCu2D/2207/

Answer 4

您应该使用keyup或keypress功能，而不是像这样设置内联样式使用addClass：

＆＃13;

$('#tot2').keyup(function() {
  var val = $(this).val();
  if (val >= 10) {
    $("#submit").removeAttr("disabled");
    $("#submit").addClass('NewSub');
  } else {
    $("#submit").attr("disabled", "disabled");
    $("#submit").removeClass('NewSub');  
  }
});

＆＃13;

.NewSub {
background: blue;
color: white;
}

＆＃13;

<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="balance" id="tot2" value="" />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

＆＃13;

Answer 5

您可以这样做，而不是使用时间interval：

$('#tot2').on('change', function(){
  if($('#tot2').val() < 10) 
    $('#submit').attr('disabled', 'disabled');
  else  $('#submit').removeAttr('disabled');
});

当使用退格键或删除按钮提交按钮颜色不变

5 个答案: