使用 jQuery 验证文本框时如何启用和禁用按钮答案

【问题标题】：how to enable and disable button when doing validation of textbox using jQuery使用 jQuery 验证文本框时如何启用和禁用按钮
【发布时间】：2017-07-30 00:07:59
【问题描述】：

var fname;
var fpan;
var sname;
var span;
var tname;
var tpan;

$(document).ready(function() {
  validate();
});

function validate() {
  $('#fpan').on("blur", function() {

    fpan = $("#fpan").val();

    if (fpan.length == 10) {

      $("#pan-valid").addClass("hidden").removeClass("hidden");
      $("#pan-invalid").addClass("hidden");
      return true;
    } else {

      $("#pan-invalid").addClass("hidden").removeClass("hidden");
      $("#pan-valid").addClass("hidden");

      return false;
    }

  });

  $('#span').on("blur", function() {

    span = $("#span").val();


    if (span.length == 10) {

      $("#pan-valid2").addClass("hidden").removeClass("hidden");
      $("#pan-invalid2").addClass("hidden");
      return true;
    } else {

      $("#pan-user-invalid2").addClass("hidden").removeClass("hidden");
      $("#pan-user-valid2").addClass("hidden");

      return false;
    }

  });

  $('#tpan').on("blur", function() {

    tpan = $("#tpan").val();


    if (tpan.length == 10) {

      $("#pan-valid3").addClass("hidden").removeClass("hidden");
      $("#pan-invalid3").addClass("hidden");
      return true;
    } else {

      $("#pan-invalid3").addClass("hidden").removeClass("hidden");
      $("#pan-valid3").addClass("hidden");

      return false;
    }

  });

  if (fhn == "") {
    $("#generate").attr("disabled", true);
  }
  //        else{
  //            $("#generate").attr("disabled", false);
  //        }
  else if (fhn != "" && fpan != "") {
    $("#generate").attr("disabled", false);
  } else if (shn == "") {
    $("#generate").attr("disabled", true);
  }
}

<html>

<body>

  <form action="/action_page.php">
    <label> First name:</label>
    <input type="text" id="fname" class="form-control">
    <br>
    <label>first pan:</label>
    <input type="text" id="fpan" class="form-control">
    <br>
    <label> First name:</label>
    <input type="text" id="sname" class="form-control">
    <br>
    <label>first pan:</label>
    <input type="text" id="span" class="form-control">
    <br>
    <label> First name:</label>
    <input type="text" id="tname" class="form-control">
    <br>
    <label>first pan:</label>
    <input type="text" id="tpan" class="form-control">
    <br>
    <br>
    <input type="button" value="Submit" id="Submit">
  </form>

当文本框为空并使用验证功能填充时，我使用 attr(disabled) 启用和禁用表单按钮。但是当我使用它时它会被禁用，当我将数据填充到 tfisrtname 和 fpan 时，它不能使能够。基本上我想做的是如下：如果 firstname text1 为空白，则禁用按钮，如果 text1 和 pan1 填充，则启用按钮。如果如果 sname text2 为空白，则禁用按钮，如果 (text1 和 pan1) &(text2 和 pan2) 填充而不是启用按钮。如果 If If tname text3 为空，则禁用按钮，如果 (text1 and pan1) &(text2 and pan2) & (text3 and pan3) 填充，则比启用按钮。

【问题讨论】：

标签： jquery arrays json ajax html

【解决方案1】：

function toggleDisabled(target) {
  var $target = $(target);
  console.log($target.val().length > 0)
  console.log($target.attr("id"))
  $("input:button").prop('disabled', !$target.val());
}

var $notnull = $('form input:not(:button)');
$notnull.each(function(i, el) {
  toggleDisabled(el);
});
$notnull.on('input', function(e) {
  toggleDisabled(e.currentTarget);
  $notnull.each(function(i, el) {
    toggleDisabled(el);
  });
}).trigger("input");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php">
  <label> First name:</label>
  <input type="text" id="fname" class="form-control">
  <br>
  <label>first pan:</label>
  <input type="text" id="fpan" class="form-control">
  <br>
  <label> First name:</label>
  <input type="text" id="sname" class="form-control">
  <br>
  <label>first pan:</label>
  <input type="text" id="span" class="form-control">
  <br>
  <label> First name:</label>
  <input type="text" id="tname" class="form-control">
  <br>
  <label>first pan:</label>
  <input type="text" id="tpan" class="form-control">
  <br>
  <br>
  <input type="button" value="Submit" id="Submit">
</form>

检查每个输入是否为空，然后禁用
它还检查文本输入

【讨论】：

【解决方案2】：

我尝试重用您的大部分代码。我已经减少了一些。

看看这对你有没有帮助。您可能需要添加对内容长度的检查（如果有必要 - 我将其取出，因为我不确定这是多少要求）

请看下面的演示

$(document).ready(function() {
  var isValid;

  // start with disabled button
  $("#Submit").prop('disabled', true);

  $("input[type='text'").on('change', function() {
    isValid = validateFields();

    if (isValid) {
      $("#Submit").prop('disabled', false);
    } else {
      $("#Submit").prop('disabled', true);
    }
  });

  var validateFields = function() {
    var span = $("#span").val();
    var fpan = $("#fpan").val();
    var tpan = $("#tpan").val();
    var fname = $("#fname").val();
    var sname = $("#sname").val();
    var tname = $("#tname").val();

    if (sname.length > 0 && span.length > 0 &&
      fname.length > 0 && fpan.length > 0 &&
      tname.length > 0 && tpan.length > 0) {

      return true;
    } else {
      return false;
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php">
  <label> First name:</label>
  <input type="text" id="fname" class="form-control">
  <br>
  <label>first pan:</label>
  <input type="text" id="fpan" class="form-control">
  <br>
  <label> First name:</label>
  <input type="text" id="sname" class="form-control">
  <br>
  <label>first pan:</label>
  <input type="text" id="span" class="form-control">
  <br>
  <label> First name:</label>
  <input type="text" id="tname" class="form-control">
  <br>
  <label>first pan:</label>
  <input type="text" id="tpan" class="form-control">
  <br>
  <br>
  <input type="button" value="Submit" id="Submit">
</form>

【讨论】：

因为 $("input[type='text']") ，我无法启用或禁用，因为当我在 fname 的文本中输入值时，它立即开始检查此条件而不是能够获取 fname 和 all 的值
我在每个文本的模糊功能上都获得了价值，而这个不能工作无法禁用按钮

【解决方案3】：

你的条件的代码应该是这样的：

if(
   ($('#fname').val() != "" && $('#fpan').val() != "") ||
   ($('#sname').val() != "" && $('#span').val() != "") ||
   ($('#tname').val() != "" && $('#tpan').val() != "")
  )
{
    //enable
    $('#Submit').removeAttr('disabled');
}
else
{
    //disable
    $('#Submit').attr('disabled', 'disabled');
}

【讨论】：

感谢@Michael，但是当 fname 和 fpan 被填充而不是被禁用时，这有点工作，但是我想要在这里正如我上面提到的那样，当两者都被填充时，fanme && fpan 被填充而不仅仅是 sname如果 fname 和 fpan 为空，并且如果您尝试填充 sname 和 span，则应该禁用按钮。

【解决方案4】：

基本上你只需要：要禁用： $(selector).attr('disabled', 'disabled')

启用： $(selector).removeAttr('disabled')

你只需要一堆 if else 语句来使用这些语句。

【讨论】：

我用过这个东西但是我不知道为什么它只禁用了我的按钮而不启用它