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

【问题标题】：jQuery: How to enable/disable button based on input value?jQuery：如何根据输入值启用/禁用按钮？
【发布时间】：2016-10-24 15:05:38
【问题描述】：

我在玩 jQuery，想知道一旦用户在输入字段中键入了内容，您将如何启用按钮？如果他们删除了输入字段的内容，那么该按钮将再次被禁用。我创建了这个小demo 来提供帮助。

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

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

【问题讨论】：

标签： javascript jquery html button input

【解决方案1】：

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

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

<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>

在您的代码上查看代码demo 的结果

【讨论】：

【解决方案2】：

我喜欢在 jQuery 中使用 .on()，如下所示：

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

【讨论】：

【解决方案3】：

如果你想禁用你的按钮：

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

如果你想再次启用它：

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

用你需要的替换#MyButton：

$('#id')通过ID获取元素

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

$('tag')通过标签名获取元素

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

是的，您可以使用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>

【讨论】：

【解决方案6】：

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

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

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

【讨论】：