Question

我一直在尝试在表单上添加一个小的jquery功能，但似乎无法让它正常运行：

$("#progress-reg").keypress(function(event){
       var n = $('#progress-reg').length;
       $('#progress-next').prop("disabled", (n < 1) ? true : false);
});

如果用户开始输入#progress-reg，它会启用#progress-next按钮（工作正常），但如果用户删除了＃progress-reg的内容，我希望如此该按钮恢复为禁用，但上面的代码似乎没有这样做。

我在发布之前确实在这里搜索过但看不到任何内容。

由于

Answer 1

如果n＆lt;

使用删除道具禁用1 https://api.jquery.com/removeProp/

$("#progress-reg").keyup(function(event){
       var n = $(this).val().length;
       if (n < 1) $('#progress-next').removeProp("disabled");
       else if ($('#progress-next').prop("disabled") == false) $('#progress-next').prop("disabled",true);

});

Answer 2

您可以使用.on('input',..事件，它可以复制/粘贴。使用val()方法获取内容，然后在按钮中添加或删除disabled属性。

$('#progress-next').prop("disabled", true)
// work with copy paste
$("#progress-reg").on('input',function(event){
       var n = $(this).val().length;
        $('#progress-next').prop("disabled", n < 1)
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="progress-reg">
<button id="progress-next">OK</button>

Answer 3

您应该检查value属性的长度

$("#progress-reg").keypress(function(event){
       $('#progress-next').prop("disabled", this.value.length == 0);
});

此外，我将您的代码重新编写为更短。

Answer 4

您应该检查输入中值的长度，而不是输入本身。
您应该绑定keyup而不是keypress。

＆＃13;

$("#progress-reg").on("keyup", function(){
    var n = this.value.length;
    $("#progress-next").prop("disabled", n < 1 ? true : false);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="progress-reg" /><button id="progress-next" disabled>Next</button>

＆＃13;

按键上的Jquery禁用/启用

4 个答案: