Question

我正在尝试创建一个简单的用户输入文本，为了避免出现问题，如果没有输入文本，我想让提交按钮不可点击。这就是我到目前为止所做的：

$(function() {
  if ($("#formSearchUserId").val() == "") {
    $('#userIdBtn').prop('disabled', true);
  } else {
    $('#userIdBtn').prop('disabled', false);
  }
});

这适用于onload，因为输入中默认没有文本，它将禁用该按钮。但是，当我在输入中键入值时，按钮保持禁用状态。

非常感谢任何帮助。

Answer 1

您应该将代码包装在$("#formSearchUserId").change(function(){ //code } )事件处理程序中。它的作用是监视输入的变化并触发发生变化时传递给的函数。

＆＃13;

$(document).ready(function(){
  $("#formSearchUserId").change(function() {
  console.log($("#formSearchUserId").val())
  if ($("#formSearchUserId").val() == "") {
    $('#userIdBtn').prop('disabled', true);
  } else {
    $('#userIdBtn').prop('disabled', false);
  }
}).change();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id=formSearchUserId name=formSearchUserId />
<button id=userIdBtn>Search</button>

＆＃13;

Answer 2

keyup：

$(document).ready(function(){
  if ($("#formSearchUserId").val() == "") {
    $('#userIdBtn').prop('disabled', true);
    }
  $("#formSearchUserId").keyup(function() {
  console.log($("#formSearchUserId").val())
  if ($("#formSearchUserId").val() == "") {
    $('#userIdBtn').prop('disabled', true);
  } else {
    $('#userIdBtn').prop('disabled', false);
  }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id=formSearchUserId name=formSearchUserId />
<button id=userIdBtn>Search</button>

Answer 3

您还可以查看.keyup。只需检查value的可用性。您可以添加.trim以避免只有空格的情况。

$("#formSearchUserId").on("keyup", function(){
  $('#userIdBtn').prop('disabled', !this.value.trim().length>0)
})

$(function(){
  $("#formSearchUserId").trigger("keyup");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="formSearchUserId"/>
<button id="userIdBtn">Id Btn</button>

方法仅称为OnLoad Jquery

3 个答案: