Question

我正在玩jQuery，并想知道一旦用户输入输入字段后如何启用按钮？如果他们删除了输入字段的内容，则该按钮将再次被禁用。我创建了这个小demo来帮忙。

我是否必须使用'keyup'来执行此操作？

$( "#target" ).keyup(function() {
  alert( "Handler for .keyup() called." );
});

Answer 1

您需要使用.prop()添加/删除按钮的disabled属性。该函数在添加/删除目标属性的第二个参数中获取true/false。

＆＃13;

$( "#target" ).keyup(function() {
  $("button").prop("disabled", !this.value);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="target" />
<button disabled>Next</button>

＆＃13;

在代码中查看代码demo的结果

Answer 2

我喜欢将.on（）与jQuery一起使用，如下所示：

$("#InputFName").on("keyup", function() {
  $("#BtnNext").prop("disabled", false);
  if( $("#InputFName").val() == '') {
    $("#BtnNext").prop("disabled", true);
 }
});

Answer 3

如果您要停用按钮：

$('#MyButton').prop('disabled', true);

如果你想再次启用它：

$('#MyButton').prop('disabled', false);

根据您的需要替换#MyButton：

$('#id')按ID

获取元素

$('.class')按类获取元素

$('tag')按标记名称

获取元素

Answer 4

$('#InputFName').keyup(function() {

     if ($("#InputFName").val() != null) {
         $("#BtnNext").removeAttr('disabled');
     } 

     if ($("#InputFName").val() == '') {
         $("#BtnNext").attr('disabled', true);
     }
});

Answer 5

是的，你也可以检查输入的模糊事件

$( "#target" ).blur(function() {
  //check if your need to disable the button
});

请记住，绕过按钮的禁用状态非常容易。

Answer 6

是的，您可以使用keyup事件，更好的是input事件，因为它可以捕获粘贴和其他类型的输入。

在该事件处理程序中，您可以只检查输入值，并创建一个返回布尔值的条件，然后可以使用它来设置按钮的disabled属性

$( "#target" ).on('input', function() {
    var val = this.value;

    $('#button').prop('disabled', val === "some value")

});

它会在用户输入时更新

在你的情况下，看起来你想检查三个输入，如果它们都有一个值，你启用按钮，你就这样做

var elems = $('#InputFName, #InputLName, #InputAge').on('input', function() {
    var bool = elems.filter(function() {
        return this.value.trim() !== "";
    }).length !== elems.length;

    $('#BtnNext').prop('disabled', bool);
});

$(document).ready(function() {
  // Hide the inputs
  $("#InputFName").hide();
  $("#InputLName").hide();
  $("#InputAge").hide();
  $("#BtnNext").prop("disabled", true);

  // When the user clicks the First name button
  $("#BtnFName").click(function() {
    $("#InputFName").show();
    $("#InputLName").hide();
    $("#InputAge").hide();
  });

  // When the user clicks the Last name button
  $("#BtnLName").click(function() {
    $("#InputFName").hide();
    $("#InputLName").show();
    $("#InputAge").hide();
  });

  // When the user clicks the Age button
  $("#BtnAge").click(function() {
    $("#InputFName").hide();
    $("#InputLName").hide();
    $("#InputAge").show();
  });

  var elems = $('#InputFName, #InputLName, #InputAge').on('input', function() {
    var bool = elems.filter(function() {
      return this.value.trim() !== "";
    }).length !== elems.length;

    $('#BtnNext').prop('disabled', bool);
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Container">
  <h3>User Form</h3>

  <p>Fill out details:</p>
  <button id="BtnFName" class="SrcButton">First name</button>
  <button id="BtnLName" class="SrcButton">Last name</button>
  <button id="BtnAge" class="SrcButton">Age</button>
  <br />

  <!-- Input Container -->
  <input id="InputFName" placeholder="First Name" />
  <input id="InputLName" placeholder="Second Name" />
  <input id="InputAge" placeholder="Age" />

  <!-- Next Button Container -->
  <br />
  <button id="BtnNext" class="BtnNext">Next</button>
</div>

jQuery：如何根据输入值启用/禁用按钮？

6 个答案: