仅当所有字段都已填写时，如何接受值或启用按钮？

Question

我试图找到一种方法来通过单击按钮或按“Enter”接受来自 HTML (razorview) 的值。我想做的是

仅当两个字段都已填写时才启用发送按钮，否则应禁用它。
按“Enter”键发送值。但是，只有当两个字段都被填满时才会发生这种情况。

我最初的（失败的）尝试看起来有点像：

< script src = "~/Scripts/jquery.signalR-2.2.2.min.js" > < /script> <
  script src = "~/signalr/js" > < /script> <
  script src = "~/Scripts/SignalR.js" > < /script> <
  script type = "text/javascript"
src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" > < /script> <
  script type = "text/javascript" > < /script>
  (function() {

    var myHub = $.connection.myHub;
    $("#textarea").keyup(function() {

      if ($(this).val() != "" && $("textarea").val() != "") {
        console.log("This should not run unless all feilds are full.");
        var text = ($(this).val()).toString();
        text = text.replace(/\s+/g, " ").trim();
        var message = ($("textarea").val()).toString();
        message = message.replace(/\s+/g, " ").trim();
        $('input[type="button"]').removeAttr('disabled');
      } else {
        $("#send").attr('disabled', 'disabled');

      }
    });

    $('#yourMessage, fname').keyup(function(e) {
      if ($("#yourMessage").val() != "" && $("#fname").val() != "") {
        if (e.which == 13) { //Enter key pressed
          $('#send').trigger('click'); //Trigger search button click event
        }
      }
    });
  })();

.button {
  text-decoration: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  outline: 0;
  display: inline-block;
  margin-right: 2px;
  border-radius: 12px;
  background-color: blue;
  opacity: 1;
}

.button-blue {
  background-color: #3498db;
}

.button-blue:hover {
  background-color: #3498db;
}

.button-blue:active {
  color: #3498db;
  background-color: #3498db;
  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
}

.button:disabled {
  opacity: 0.6;
  pointer-events: none;
}

<h1>Hello!</h1>
<form action="" method="post" id="subscribe" name="subscribe">
  First name: <input type="text" name="fname" id="fname" placeholder="Name" required autofocus><br>
  <div id="message"></div>
  Your Message:<br>
  <textarea typeof="text" id="yourMessage" placeholder="Start Typing..." required></textarea><br />
  <input type="button" class="button button-blue" value="Send" name="button" disabled="disabled" id="send" />
</form>
<input type="button" class="button button-blue" value="Click Me!" id="click-me" />

Answer 1

答案是您必须绑定所有不同的案例。这是您正在寻找的工作 jsfiddle：https://jsfiddle.net/4z5zgqbn/

$(document).ready(function() {
  $("#send").prop("disabled", true);

  $("#yourMessage").on("keyup", function() {
    if ($(this).val() != "" && $("#fname").val() != "") {
      $("#send").prop("disabled", false);
    } else {
      $("#send").prop("disabled", true);
    }
  });
  $("#fname").on("keyup", function() {
    if ($(this).val() != "" && $("#yourMessage").val() != "") {
      $("#send").prop("disabled", false);
    } else {
      $("#send").prop("disabled", true);
    }
  });

  $("#yourMessage, #fname").on("keyup", function(e) {
    if (e.which == 13 && $("#fname").val() != "" && $("#yourMessage").val() != "") {
      $("#send").click();
    }
  })

  $("#send").on("click", function() {
    alert("send message");
  })
})

Answer 2

致 1: 那就是我所做的：给你所有的输入一个相同的 class 名称 (.classname),

$(".classname").bind("change paste keyup", function() {
    if ($("#fname").val() && $("#yourMessage").val()) { 
        $( "#Send" ).prop( "disabled", false ); 
    } else {
        $( "#Send" ).prop( "disabled", true );
    }
});

致 2：

$('.classname').on('keypress', function (e) {
     if(e.which === 13 && $("#fname").val() && $("#yourMessage").val()){

        //Disable textbox to prevent multiple submit
        $( "#Send" ).prop( "disabled", true );
        //Submit your form
     }

});

还没有测试过。

仅当所有字段都已填写时，如何接受值或启用按钮？

How to accept values or enable a button only if all fields are filled?

html

javascript

jquery

jquery-events