Question

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（禁用）来启用和禁用表格按钮，当文本框为空并使用验证功能填充时。但是当我使用它时，它会被禁用，当我将数据填入tfisrtname和fpan时，它无法启用。基本上我想做的是如下：如果firstname text1为空白而不是禁用按钮，并且如果填充text1和pan1而不是启用按钮。如果sname text2为空白而不是禁用按钮，并且填写了（text1和pan1）＆amp;（text2和pan2）而不是启用按钮。如果If if tname text3为空白而不是禁用按钮，如果（text1和pan1）＆amp;（text2和pan2）＆amp; （text3和pan3）填充而不是启用按钮。

Answer 1

基本上你只需要做的事情：要禁用： "it.Thetwineitselfisinillusionbecauseitfindsitselfboundbyknots. Theknotsarethesanskarasandthetwineisthesoul.Becausethesoulisunconscious ofitsownSelfasGod,itsattentionremainsfocussedontheknots.Tobefreed"

启用： $(selector).attr('disabled', 'disabled')

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

Answer 2

您的病情代码应该是这样的：

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

Answer 3

我尝试重新使用大部分代码。我把它的一些最小化了。

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

请参阅下面的演示

＆＃13;

$(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;
    }
  };
});

＆＃13;

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

＆＃13;

Answer 4

＆＃13;

(or 1 2)

＆＃13;

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");

＆＃13;

如果有空，则检查每个输入然后禁用
它还检查文本输入

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

4 个答案: